清除Validators后如何让FormGroup变为有效状态？

你的代码存在关键问题：清除name控件的验证器后，没有重新计算该控件的状态，直接更新整个表单状态，导致name控件仍保留初始的required验证错误，最终表单始终处于无效状态。

修正后的代码 #

form = new FormGroup({
    name: new FormControl('', [Validators.required]),
    type: new FormControl('test', [Validators.required]),
});

// 清除name控件的同步验证器
this.form.get('name').clearValidators();
// 重新计算该控件的验证状态，并同步到父表单（emitEvent: false 避免触发不必要的valueChanges事件）
this.form.get('name').updateValueAndValidity({ emitEvent: false });

原理说明 #

• clearValidators()仅移除控件的同步验证器，但不会自动更新验证状态，之前的required错误会暂时保留。
• 必须调用控件自身的updateValueAndValidity()方法，才能重新计算验证状态、清除旧错误，并将状态同步到父表单。默认该方法会触发父控件状态更新，无需额外调用表单的updateValueAndValidity()。
• 若模板无特殊变更检测需求，cdr.detectChanges()可省略，Angular表单状态变更会自动触发变更检测。

内容的提问来源于stack exchange，提问作者Jeanluca Scaljeri