angular - 基于布尔角反应形式有条件地应用 mat-form-field-invalid

Question

我正在研究一种反应形式，并且对密码字段有限制。我想mat-form-field-invalid根据布尔值手动应用类''。

我的 HTML

<mat-form-field
          appearance="outline"
          [ngClass]="{
            'mat-form-field-invalid':
              !passwordsRequirementSatisfied && f.password.touched
          }"
        >
          <mat-label>Password</mat-label>
          <input
            matInput
            [type]="hidePassword ? 'password' : 'text'"
            (keyup)="validatePassword()"
            formControlName="password"
            required
          />
          <button
            mat-icon-button
            matSuffix
            (click)="hidePassword = !hidePassword"
            type="button"
          >
            <mat-icon>{{
              hidePassword ? "visibility_off" : "visibility"
            }}</mat-icon>
          </button>
</mat-form-field>

任何帮助深表感谢

标签： angularsassangular-material

Answer 1

无需手动更改类以影响样式，您可以通过编写自定义验证器以 Angular/Reactive Forms 方式进行。在组件逻辑中定义表单控件时应用它。