提交表单时如何触发表单验证（仅）？

Question

我创建了一个动态表单，您可以在其中使用专用按钮添加或删除字段：

问题是当我们添加新字段时，会立即触发表单验证，导致显示错误消息：

我想仅当用户尝试在出现错误时提交表单时触发它。当然如果有错误则无法提交表单(Validators.required, nicknameValidator())

下面是生成新行的代码，格式如下：

createNicknameFormGroup(): any {
  return new FormGroup({
    nickname: new FormControl('', Validators.required, this.isValidNicknameService.nicknameValidator())
  }, { updateOn: 'blur' })
}

以及负责显示这些行的 html 代码：

<div *ngFor="let nickname of nicknamesFormArray.controls; let i = index;" class="row">

  <div [formGroupName]="i">

    <mat-form-field appearance="outline" class="nickname-form-field">
      <mat-label>{{formFieldsInfo.nicknames.label}}</mat-label>
      <input matInput [placeholder]=formFieldsInfo.nicknames.placeholder formControlName="nickname"
             type="text"
             class="form-control">
      <mat-hint>{{formFieldsInfo.nicknames.hint}}</mat-hint>
      <mat-error *ngIf="nicknamesFormArray.controls[i].get('nickname').errors?.required">
        {{formFieldsInfo.nicknames.errorMessages.required}}
      </mat-error>
      <mat-error *ngIf="nicknamesFormArray.controls[i].get('nickname').errors?.shouldNotStartWithA">
        {{formFieldsInfo.nicknames.errorMessages.shouldNotStartWithA}}
      </mat-error>
    </mat-form-field>

    <mat-icon (click)="removeNicknameFromNicknamesFormArray(i)" class="clear">
      clear
    </mat-icon>

  </div>

</div>

Answer 1

未设置验证器。放空就好了。
提交时（只是按钮），您可以根据需要通过 setValidators() 和 setErrors() 添加验证器运行时。
出现 are/is 个错误后，您必须将空数组的验证器清理到 setValidators()

https://angular.io/api/forms/AbstractControl#setValidators https://angular.io/api/forms/AbstractControl#setErrors

我建议阅读更多 API 个选项。

提交表单时如何触发表单验证（仅）？

How to trigger form validations (only) when submitting the form?

angular

angular-forms

angular2-form-validation