如何手动触发 Angular 2 输入验证？

Question

I have two inputs:

• First one on which I apply my custom validator
• Second one which value I use in my custom validator (it is dynamic and editable)

If I apply my custom validator on the first input, then I focus the second one and change the value - I want to force first inputs re-validation...

At the moment it only re-validates first input when I change the value... Any suggestions?

At the moment when I focus the first input I can access it's reference:

<input
    name="mEnd"
    class="form-control"
    [(ngModel)]="endDate"
       ...
    #endDateInput="ngModel"
    (focus)="clog(endDateInput)"
>

I wonder can I trigger re-validation using the input formControl reference methods?

Answer 1

您可以更新 formControl 的有效性

form.controls['myControl'].updateValueAndValidity();

Answer 2

If you have template-driven form you can access form throw ViewChild decorator:

@ViewChild('myForm') public form: NgForm;

then, validate one field or the whole form group using method mentioned above:

this.form.controls.myControl.updateValueAndValidity();

Answer 3

我发现这要好得多

this.myForm.markAllAsTouched();

Answer 4

Angular 12 and the other answers didnt work for me..so i added a hidden button on the form

 <button type="submit" [style.visibility]="'hidden'" #submitBtn>Submit</button>

On the controller ViewChild this button.

  @ViewChild('submitBtn') private buttonSubmit:ElementRef;

And force a click on the event i want.

  submitFormByKey(){
    this.buttonSubmit.nativeElement.click();
  }

This will trigger a submit and validate all.