角度验证：单击按钮时验证/突出显示子输入

Question

Using Angular 6 here:

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.

On the submit click button, I want to validate all the inputs of the child as they are required and throw error accordingly.

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.

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.

Here is some relevant code.

--Parent--

<form class="form-horizontal" [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <child [myForm]="myForm"></child>
  <button type="submit">Submit</button>
</form>

<br>
Form Valid:  <pre>{{myForm.valid}}</pre>

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--

<div class="form-group" [formGroup]="myForm">
    <label for="myForm" class="col-sm-3 control-label">Name:</label>
    <div class="col-sm-8" [ngClass]="{ 'has-error': myForm.controls?.uname.errors }">
      <input type="text" formControlName="uname"  placeholder="Enter Name...">
      <em *ngIf="myForm.hasError('required', 'uname') && myForm.controls?.uname.touched">*Required</em>
    </div>
  </div> 

export class ChildComponent {
  @Input() myForm: FormGroup;

  ngOnInit() {

  }
}

I have also created a demo to show this at:

https://stackblitz.com/edit/angular-dbevnj

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.

Any inputs how to get this resolved?

Answer 1

We resolved this by calling markAsTouched on all form controls when submitting the form.

In your case you can add this.myForm.get('uname').markAsTouched(); to your onSubmit() method.