markAsUntouched 不清除红线

Question

I'm using reactive form with Angular Material. When I click onsubmit() I want that all params that don't have a value will not show with error(red line)

I try to use this.formGroup.markAsUntouched(); but it didn't work.

When I don't use on Angular Material, it works. Does someone know how to do it right with Angular Material?

<form [formGroup]="formGroup" (ngSubmit)="onSubmit(formGroup.value)" class="form">
    <mat-form-field class="form-element">
        <input matInput placeholder="Emailaddress" formControlName="email">
    </mat-form-field>
</form>



onSubmit(post) {
    this.formGroup.markAsUntouched();
}

The formGroup will be untouched but the red lines still appears.

Answer 1

formReset(formGroup: FormGroup) {
    formGroup.control.reset();
    formGroup.control.markAsPristine();
    formGroup.control.markAsUntouched();
}

// for safety measure try calling this function in a try-catch block, it works on a reactive forms

Answer 2

如果出现红色下划线，则可以重置所有 FormGroup 错误this.formGroup.setErrors(null);

Answer 3

Use this approach to suppress all error message

Object.keys(this.mygroup.controls).map((field) => {
      const control = this.mygroup.get(field);
      if (control instanceof FormControl) {
        control.setErrors(null);
      }  
    });

Or to individually suppress any message

this.mygroup.controls.frmCtrlMyControl.setErrors(null);