title: Angular Validation: Validate/Highlight child input on button click
body: <p>Using Angular 6 here:</p>
  
  <p>I have a parent component and within that I have a child component. The child component has a text fields. The parent has a submit button.</p>
  
  <p>On the submit click button, I want to validate all the inputs of the child as they are required and throw error accordingly.</p>
  
  <p>I am using reactive forms and was successfully able to pass form info from parent to child. But I am not sure how to highlight my text input when the submit button is clicked. </p>
  
  <p>I have used $touched property on my child, which works and shows the required error. But I want the error to also show in case user just clicked the button. </p>
  
  <p>Here is some relevant code.</p>
  
  <pre><code>--Parent--
  
  &lt;form class="form-horizontal" [formGroup]="myForm" (ngSubmit)="onSubmit()"&gt;
      &lt;child [myForm]="myForm"&gt;&lt;/child&gt;
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;br&gt;
  Form Valid:  &lt;pre&gt;{{myForm.valid}}&lt;/pre&gt;
  
  export class AppComponent {
    myForm: FormGroup
  
    constructor(private fb: FormBuilder) {
      this.myForm = this.fb.group({
        uname: ['', Validators.required]
      });
    }
  
    onSubmit() {
      console.log('value: ', this.myForm.value);
      console.log('the whole form and its controls: ', this.myForm)
    }
  }
  
  --Child--
  
  &lt;div class="form-group" [formGroup]="myForm"&gt;
      &lt;label for="myForm" class="col-sm-3 control-label"&gt;Name:&lt;/label&gt;
      &lt;div class="col-sm-8" [ngClass]="{ 'has-error': myForm.controls?.uname.errors }"&gt;
        &lt;input type="text" formControlName="uname"  placeholder="Enter Name..."&gt;
        &lt;em *ngIf="myForm.hasError('required', 'uname') &amp;&amp; myForm.controls?.uname.touched"&gt;*Required&lt;/em&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
  
  export class ChildComponent {
    @Input() myForm: FormGroup;
  
    ngOnInit() {
  
    }
  }
  </code></pre>
  
  <p>I have also created a demo to show this at:</p>
  
  <p><a href="https://stackblitz.com/edit/angular-dbevnj" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-dbevnj</a></p>
  
  <p>FYI, this is just a sample I created to show my issue. I would be having 2-3 child components and few form controls on each.</p>
  
  <p>Any inputs how to get this resolved?</p>