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 时隐藏消息可以实现该目标。