Question

在模板中，我有一个通过按按钮打开的表单-

     <form [formGroup]="person"
          (ngSubmit)="onSubmitNewPerson()"
          #formDirective="ngForm">

            <mat-form-field>
                <input matInput formControlName="firstName" required>
            </mat-form-field>

            <mat-form-field>
                <input matInput formControlName="lastName" #last required>
            </mat-form-field>
</form>

在组件中我有此代码-

  @ViewChild('formDirective') formDirective: FormGroupDirective;

 this.person = this.formBuilder.group({
            lastName: ['', Validators.required],
            firstName: ['', Validators.required]
        });

关闭按钮后，我运行此功能-

   this.formDirective.resetForm();//hack that I saw in some question
    this.person.reset();

但是再次打开表单后，我立即在输入下看到红色错误。

我也尝试过这个

    this.person.get('firstName').markAsUntouched();
   this.person.get('lastName').markAsUntouched();
     this.person.get('firstName').markAsPristine();
    this.person.get('lastName').markAsPristine();

但这也不行。

有什么想法要解决吗？

Answer 1

当我想重置验证器时，我使用了以下内容：

    this.person.get('firstName').clearValidators();
    this.person.get('firstName').updateValueAndValidity();

Answer 2

只需从html模板中删除必填项，如果要重点显示错误消息，则可以尝试显示不同的错误消息。

这是html模板：

break;

这是component.ts

<div class="form-group">
        <label for="name" class="form-control-label">
        *Amount:
        </label>
        <input type="number" name="amount" class="form-control"  [formControl]="form.controls['amount']">
        <div>
        <small *ngIf="form.controls['amount'].hasError('required') && form.controls['amount'].touched" class="text-danger">
           Please enter an amount.
        </small>
        <small  *ngIf="form.controls['amount'].hasError('min') && form.controls['amount'].touched" class="text-danger">
             Your amount must be at least 0.01.
        </small>
        <small  *ngIf="form.controls['amount'].hasError('max') && form.controls['amount'].touched" class="text-danger">
                Your amount cannot exceed 999999.99.
        </small>
        </div>

Answer 3

尽管这个问题有点古老，此答案可能会对有此问题的人有所帮助。

如果Angular材质>VEC1 = c(TRUE,TRUE,FALSE,TRUE) >VEC2 = c(TRUE,FALSE,FALSE,TRUE) >VEC1 & VEC2 [1] TRUE FALSE TRUE TRUE中出现此问题，则可以看到为此question提供的解决方案。

（这就是为什么一些受访者无法重现该问题的原因）

角度5，反应形式-重置所需的表单控件不会重置输入下的所需错误

3 个答案: