Angular 反应表单 - 禁用所需的表单控件使表单有效，即使没有给出值

Question

我创建了一个如下所示的角反应形式

组件.html

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <h5 class="card-title text-center">Login</h5>
  <div class="form-group">
    <label class="text-success" for="exampleInputEmail1"
      >Email address</label
    >
    <input
      type="email"
      class="form-control"
      id="exampleInputEmail1"
      aria-describedby="emailHelp"
      formControlName="email"
      placeholder="Enter email"
    />
  </div>
  <div class="form-group">
    <label class="text-danger" for="exampleInputPassword1"
      >Password</label
    >
    <input
      type="password"
      class="form-control"
      id="exampleInputPassword1"
      formControlName="password"
      placeholder="Password"
    />
  </div>
  <button type="submit" class="btn btn-primary">Login</button>
</form>

组件.ts

constructor(private fb: FormBuilder) {}

public loginForm: FormGroup;

ngOnInit(): void {
  this.initializeForm();
}

initializeForm = () => {
  this.loginForm = this.fb.group({
    age: [''],
    email: ['', [Validators.required]],
    password: ['', [Validators.required]],
  });
  this.loginForm.controls.email.disable();
  this.loginForm.controls.password.disable();
}

onSubmit() {
  if (this.loginForm.valid) {
    console.log('Login form - valid');
  } else {
    console.log('Login form - invalid');
  }
}

小提琴有问题

正如您所看到的，我在表单组内有 3 个表单控制字段，email、password和age。age是一个隐藏字段，我将根据某些逻辑从我的脚本中更新它。

我已经在初始化过程中使用email和禁用了和。稍后我将根据一些逻辑启用它们。passwordthis.loginForm.controls.email.disable();this.loginForm.controls.password.disable();

截至目前，我已禁用 2 个必需的表单控件，并且尚未使用任何值进行初始化。理想情况下，此表格无效。但是，当我尝试从表单提交功能在控制台中记录表单有效状态时，它将有效状态记录为 true。

为什么会这样呢？

我注意到的其他一些行为是

• 如果我们使用 禁用完整的表单，而不是禁用独立的表单控件this.loginForm.disable();，则表单将根据我的要求保持无效状态，但如果我们更新表单中的值，则不会更改为有效状态。
• 此外，如果我禁用第三个输入age以及 2 个输入email和password，表单将保持无效，但如果我们更新表单中的值，则不会更改为有效。
• 此外，如果没有第三个字段age，并且我做了 2 个输入email并password禁用，则表单将保持无效，但如果我们更新表单中的值，它仍然不会更改为有效。

有人能说为什么当某些输入被禁用时表单仍然有效吗？

Answer 1

当您禁用表单字段（表单控件）时，这意味着该控件免于验证检查并从任何父级的聚合值中排除。状态将是DISABLED.

• 因此，在您的项目中，当您禁用电子邮件/密码并且年龄仍然存在时，您的表单将有效，因为年龄有效。
• 在第一个项目符号中，当您禁用整个表单时，您将检查表单是否有效。表格无效或无效。您的表格将具有状态DISABLED。
• 在第二个项目符号中，如果禁用表单的所有字段，则表单将DISABLED再次具有状态，因为所有字段都具有此状态。
• 在第三个项目符号中，两个字段都被禁用意味着您的表单将具有DISABLED状态。

换句话说，检查有效和无效表单是不正确的。尝试使用else if并添加DISABLED检查以更好地理解。

  if (this.loginForm.valid) {
    console.log('Login form - valid');
  } else if (this.loginForm.invalid) {
    console.log('Login form - invalid');
  } else if (this.loginForm.disabled) {
    console.log('Login form - disabled');
  }