在任何用户交互之前显示 mat-form-field 验证消息

Question

这是参考代码，

  <div>
      <mat-form-field class="w-100 mt-2" appearance="outline">
        <mat-label>Enter a name for your quote</mat-label>

        <input #quoteName matInput placeholder="Enter a name for your quote" formControlName="quoteName" [maxlength]="40"  (input)="onQuoteNameInput($event)" />
        <mat-hint align="end">{{quoteName.value.length}} / 40</mat-hint>
        <mat-error *ngIf="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors?.required">Quote Name is
          required.</mat-error>
      </mat-form-field>
    </div>

在上面的代码中，我使用 Touched 属性来控制错误消息的显示，因此我可以根据需要成功显示或隐藏它们。但是，表单加载后，输入字段的轮廓边框仍然显示为红色。如何防止最初出现红色轮廓？

Answer 1

1. 除了触摸状态之外，还添加了

   mat-form-field-invalid

   类检查：

<mat-form-field 
  class="w-100 mt-2" 
  appearance="outline"
  [class.mat-form-field-invalid]="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors">

2. 或者，您可以在 CSS 中使用 Angular 的内置

   ng-valid

   和

   ng-invalid

   类以及触摸状态：

.mat-form-field {
  &.ng-invalid.ng-untouched {
    // Override the default error styles when untouched
    .mat-form-field-outline {
      color: rgba(0,0,0,0.12) !important; // Default outline color
    }
  }
}

3. 您还可以将表单控件初始化为

   null

   而不是空字符串，以防止立即验证：

this.quoteDetailsFormGroup = this.formBuilder.group({
  quoteName: [null, Validators.required]
});

4. 另一种方法是使用 updateOn: 'blur' 推迟验证，直到字段失去焦点：

this.quoteDetailsFormGroup = this.formBuilder.group({
  quoteName: ['', {
    validators: Validators.required,
    updateOn: 'blur'
  }]
});

最稳健的解决方案是结合方法 1 和 3。这是完整的代码：

// Component class
export class QuoteComponent implements OnInit {
  quoteDetailsFormGroup: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.quoteDetailsFormGroup = this.formBuilder.group({
      quoteName: [null, Validators.required]
    });
  }
}

<div>
  <mat-form-field 
    class="w-100 mt-2" 
    appearance="outline"
    [class.mat-form-field-invalid]="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors">
    <mat-label>Enter a name for your quote</mat-label>
    <input 
      #quoteName 
      matInput 
      placeholder="Enter a name for your quote" 
      formControlName="quoteName" 
      [maxlength]="40"  
      (input)="onQuoteNameInput($event)" />
    <mat-hint align="end">{{quoteName.value.length}} / 40</mat-hint>
    <mat-error *ngIf="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors?.required">
      Quote Name is required.
    </mat-error>
  </mat-form-field>
</div>

1. 它将使用

   null

初始化表单控件
2. 仅当字段被触摸且有错误时才显示红色轮廓