角度反应表单-禁用所需的表单控件会使表单有效，即使没有给定值

Question

我创建了一个角度反应形式，如下

component.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');
}
}

Fiddle有问题

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

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

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

为什么会这样？

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

• 如果我们使用this.loginForm.disable();禁用完整表单，而不是禁用独立的表单控件，则根据我的要求，表单将保持无效状态，但如果我们更新表单中的值，则不会将其更改为有效
• 此外，如果我禁用第三个输入age以及两个输入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');
}