在我开始输入之前，字段变成红色

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">