angular - フォームの送信時にフォームの検証 (のみ) をトリガーする方法は?

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>