基于布尔角反应形式有条件地应用 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>

非常感谢任何帮助

Answer 1

您可以通过编写 custom validator 以 Angular/Reactive Forms 的方式进行更改，而不是手动更改类以影响样式。在组件逻辑中定义表单控件时应用它。