Поля становятся красными, прежде чем я начну печатать

Question

Проблема в том, что поля проверяются до того, как я начну печатать.Когда я открываю страницу, которая состоит из всех полей из скриншота, поля уже красные.Я разместил фрагменты HTML и введите код скрипта, потому что все поля выглядят одинаково.Буду очень признателен за помощь.

primaryFormGroup = new FormGroup({});
  primaryFirstName = new FormControl('', [Validators.required]);
  
  ngAfterViewInit(): void {

    this.primaryFormGroup.addControl('primaryFirstName', this.primaryFirstName);
    this.formGroupPersonalInfo.addControl('primaryFormGroup', this.primaryFormGroup);
    
  }

Html

<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="10px">
  <mat-form-field fxFlex="25">
    <input matInput name="primaryfirstname" fuse-letters-only-format [formControl]="primaryFirstName" [attr.data-name]="sel_primary_firstname_input" [(ngModel)]="applicationService.application.primaryPersonalInfo.firstName"
      placeholder="First name" maxlength="12" minlength="1" required (change)="personalInfoService.searchForWordTest($event)">
    <mat-hint align="end">{{primaryFirstName.value?.length || 0}} / 12</mat-hint>
    <mat-error *ngIf="primaryFirstName.hasError('required')">
      <div [attr.data-name]="sel_primary_firstname_req_errmsg">First name field is required.</div>
      <div fxLayoutAlign="end start" fxFlex>{{primaryFirstName.value?.length || 0}} / 12</div>
    </mat-error>
  </mat-form-field>
</div>

Answer 1

Вы должны также проверить, коснулся ли он, прежде чем показывать ошибку.

<mat-error *ngIf="primaryFirstName.hasError('required') && primaryFirstName.touched">