fix(ValidationMessage): Disable change detection OnPush to get called…

… on first change cycle

terminus-ui/input/src/input.component.spec.ts

@@ -92,6 +92,19 @@ describe(`TsInputComponent`, function() {
         expect(el.getAttribute('required')).toEqual('');
       });
 
+      test(`should display validation message if the form control is required and validation fails`, () => {
+        const fixture = createComponent(TestComponents.FormControlAttrRequired);
+        fixture.detectChanges();
+        const component = getInputInstance(fixture);
+        const el = component.inputElement.nativeElement;
+        el.focus();
+
+        component.onBlur();
+        fixture.detectChanges();
+
+        const validation = fixture.debugElement.query(By.css('.c-validation-message'));
+        expect(validation.nativeElement.textContent.trim()).toEqual('Required');
+      });
 
       test(`should set required if the required flag is set`, () => {
         const fixture = createComponent(TestComponents.AttrInputRequired);

terminus-ui/validation-messages/src/validation-messages.component.ts

@@ -18,6 +18,7 @@ let nextUniqueId = 0;
 
 /**
  * A presentational component to render validation messages
+ * NOTE: ChangeDetectionStrategy.OnPush is disabled here because it affects control getting to this service on the first change cycle.
  *
  * @example
  * <ts-validation-messages
@@ -29,13 +30,13 @@ let nextUniqueId = 0;
  *
  * <example-url>https://getterminus.github.io/ui-demos-release/components/validation</example-url>
  */
+// tslint:disable: prefer-on-push-component-change-detection
 @Component({
   selector: 'ts-validation-messages',
   templateUrl: './validation-messages.component.html',
   styleUrls: ['./validation-messages.component.scss'],
   host: { class: 'ts-validation-messages' },
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
   exportAs: 'tsValidationMessages',
 })
 export class TsValidationMessagesComponent implements OnDestroy {