Блог

Я создал динамическую форму, в которой вы можете добавлять или удалять поля с помощью специальных кнопок:

Проблема в том, что когда мы добавляем новое поле, проверки формы немедленно запускаются, что приводит к отображению сообщений об ошибках:

Я хотел бы запустить его, только если пользователь попытается отправить форму при наличии ошибок. И, конечно, форма не может быть отправлена, если есть ошибки (Validators.required, NICKNAME Validator())

Вот код, который генерирует новую строку в форме:

 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>
  

1. Не установлен валидатор. Просто дайте пустой.
2. Когда отправляете (что просто кнопка), и вы можете добавить время выполнения валидатора setValidators() , и setErrors() если хотите.
3. После того, как есть / есть ошибка (ошибки), вы должны очистить валидаторы с пустым массивом в setValidators()

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

Я рекомендую ознакомиться с дополнительными параметрами API.