Angular Form控件在组件初始化上无效，无需任何操作

Question

在组件初始化上，所有带有验证器的表单控件都被标记为无效，无需执行任何操作。

component.html

<form [formGroup]="form" (ngSubmit)="submit()">
  <input type="text" formControlName="phone" [class.error]="form.get('phone').invalid">
  <button type="submit">goo</button>
</form>

component.ts

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

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

  constructor(public fb: FormBuilder) {
      this.form = this.fb.group({
          phone: [
              null,
              [Validators.required, Validators.minLength(9), Validators.maxLength(9), Validators.pattern('^[0-9]*$')]
          ]
      });

      console.log(this.form);
  }

  submit() {
      if (this.form.invalid) return;

      console.log(this.form.value);
  }
}

Stackblitz

Answer 1

因为您的约束Validators.required

您可以console.log(this.form.get('phone').value)显示null，以便控件无效。

应删除[class.error]="form.get('phone').invalid"

Answer 2

您将要查看的表单和表单控件上还有其他属性。给您一个问题，我相信以下应该可以解决您的问题：

<form [formGroup]="form" >
  <input type="text" formControlName="phone" [class.error]="form.get('phone').invalid && form.get('phone').touched">
  <button type="submit">goo</button>
</form>