Angular 反應形式在頁面加載時無效

Question

我有一個表單，其中我的三個輸入（兩個字段和一個復選框）在頁面首次加載時ng-invalid 。 該復選框是我最關心的一個，因為它立即帶有紅色邊框（“此字段是必需的”）。 ng-invalid作為 class 設置紅色邊框，而ng-valid設置灰色邊框（我想要）。

頁面上還有其他一些字段，但它們已被禁用，既不無效也不有效。

什么將表單字段設置為ng-invalid ？ 我懷疑我的FormGroup和控件的設置方式有問題，但我不確定罪魁禍首是什么。 我注意到ng-invalid被添加到FormGroup本身，所以對我來說解決這個問題是解決這個問題的關鍵。

---

組件.ts

  constructor(
    private cdr: ChangeDetectorRef,
    private formBuilder: FormBuilder
  ) { }

  myFormGroup = this.formBuilder.group({
      // other FormControls
      password: new FormControl('', [Validators.required, Validators.minLength(MIN_PW)]),
      confirmPassword: new FormControl('', Validators.required),
      myCheckbox: new FormControl('', Validators.required)
    }, { validator: PasswordValidation.MatchPassword }
  );

  ngOnInit(): void {
    // etc
  }

模板：

<form [formGroup]="myFormGroup" #myNgForm="ngForm" class="my-form">

  <div>
      <mat-form-field appearance="outline" class="password-field half-width">
        <input matInput [type]="hidePassword ? 'password' : 'text'" formControlName="password">
        <mat-error *ngIf="myFormGroup.controls['password'].invalid">Password is required and must contain at least 8 characters.</mat-error>
        <button mat-icon-button matSuffix (click)="hidePassword = !hidePassword" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hidePassword">
          <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
        </button>
        <mat-label>Password</mat-label>
        <mat-hint>Must be at least 8 characters</mat-hint>
      </mat-form-field>

      <mat-form-field appearance="outline" class="ml-16 password-field half-width">
        <input matInput [type]="hidePassword ? 'password' : 'text'" formControlName="confirmPassword">
        <mat-error *ngIf="myFormGroup.controls['confirmPassword'].pristine || myFormGroup.controls['confirmPassword'].errors?.MatchPassword">Passwords do not match</mat-error>
        <button mat-icon-button matSuffix (click)="hidePassword = !hidePassword" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hidePassword">
          <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
        </button>
        <mat-label>Confirm password</mat-label>
      </mat-form-field>

    </div>

    <div>
      <p class="full-width">
        <mat-checkbox formControlName="myCheckbox" required>some text</mat-checkbox>
      </p>
    </div>

</form>

---

這是復選框上的ng-invalid class。

Answer 1

什么將表單字段設置為 ng-invalid？ 我懷疑我的 FormGroup 和控件的設置方式有問題，但我不確定罪魁禍首是什么。 我注意到 ng-invalid 被添加到 FormGroup 本身，所以對我來說解決這個問題是解決這個問題的關鍵。

由於您已經定義了驗證器，例如required ， minLength等，並且表單控件使用空字符串初始化，因此驗證失敗，這就是添加ng-invalid class 的原因。 這並不意味着 FormGroup 和控件設置是錯誤的。 盡管您應該將 myCheckbox FormControl 的默認初始值設置為false而不是'' 。

除了ng-invalid class 之外，Angular 也會自動添加其他類，如問題中的截圖之一所示。 您需要將它們與ng-invalid class結合使用。

• ng-pristine表示用戶沒有修改表單控件。 一旦用戶修改了表單控件，就會添加ng-dirty class。
• ng-untouched表示用戶沒有與表單控件進行交互。 聚焦到該領域，然后簡單地移出（即模糊）將添加ng-touched class，因為用戶現在已經與該領域進行了交互。

當任何 FormControl 無效時，FormGroup 也將無效。 上述類也將應用於 FormGroup。 因此，如果任何 FormControl 具有ng-dirty或ng-touched class，同樣適用於 FormGroup。

來自談論原始 state 重要性的文檔。 雖然它可能與顯示/隱藏錯誤消息有關，但也適用於樣式：

Pristine 意味着用戶沒有更改該值，因為它以這種形式顯示。 如果忽略原始 state，則僅當值有效時才會隱藏消息。 如果你帶着一個新的（空白的）英雄或一個無效的英雄進入這個組件，你會在你做任何事情之前立即看到錯誤消息。

您可能希望僅在用戶進行無效更改時才顯示該消息。 在控件位於原始 state 時隱藏消息可以實現該目標。