在未触及字段时验证 Angular Material 输入字段的边框颜色

Question

我尝试使用 Angular Material 字段并响应用户输入，例如如果有什么问题，应该指出错误。我已将代码精简为仅显示密码的一小部分。我知道有一个来自反应式的验证对象，我可以询问验证问题，例如必需的、最小长度、最大长度等。我也知道，我可以创建一个 @if ()，仅当字段被触摸和/或更改时，我才能包含 mat-error 标签。

我的问题是，它从一开始就显示大纲字段的错误边框，而不仅仅是在有输入的情况下。有谁可以告诉我或将我链接到一个页面，其中解释了验证和角度材料轮廓字段的组合，因此只有当光标位于该字段中并且离开该字段时才会出现验证问题时，我才会有红色边框？

2025 年最诚挚的问候和祝福 副蛔虫

<mat-form-field appearance="outline" hideRequiredMarker>
    <mat-label>Password</mat-label>
    <input matInput type="password" id="password">
    <mat-error>
        <span class="form-error">Error in password</span>
    </mat-error>
</mat-form-field>

Answer 1

您缺少的是装订。

为了确保红色边框只在与字段交互后才出现，需要根据 FormControl 状态绑定边框的

ngClass

或

ngStyle

。以下是如何实现这一目标：

<mat-form-field appearance="outline" hideRequiredMarker>
  <mat-label>Password</mat-label>
  <input 
    matInput 
    type="password" 
    id="password" 
    formControlName="password" 
    [ngClass]="{'error-border': passwordControl.invalid && (passwordControl.dirty || passwordControl.touched)}">
  <mat-error>
    <span class="form-error">Error in password</span>
  </mat-error>
</mat-form-field>

成分：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-password-field',
  templateUrl: './password-field.component.html',
  styleUrls: ['./password-field.component.css']
})
export class PasswordFieldComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      password: ['', [Validators.required, Validators.minLength(6)]],
    });
  }

  get passwordControl() {
    return this.form.get('password');
  }
}

希望这有帮助！