如何将布尔属性值传递给Angular表单的disabled属性？

你这种情况是因为Angular表单控件的初始化配置是静态一次性赋值的：

• 初始化时this.pessoaFisica的值只会在表单创建那一刻被读取，哪怕之后pessoaFisica变量变化，控件的disabled状态也不会自动更新。
• 而value属性能生效，是因为你后续可能通过表单的patchValue/setValue或者双向绑定更新了值，但disabled状态如果只在初始化配置里设置，不会跟着变量动态变化。

另外，Angular官方不推荐在表单控件的初始化配置里直接用组件属性绑定disabled，正确的做法是通过表单控件的API来动态控制禁用状态：

解决步骤 #

1. 先正常初始化控件，不设置disabled：

cnpj: ['', [Validators.required, Validators.minLength(14), Validators.maxLength(14)]],

2. 在组件初始化或属性变化时，动态设置禁用状态：
   • 比如在ngOnInit里：

   ngOnInit() {
     if (this.pessoaFisica) {
       this.form.get('cnpj')?.disable();
     } else {
       this.form.get('cnpj')?.enable();
     }
   }
   

   • 如果要响应pessoaFisica的动态变化，可以用ngOnChanges监听：

   ngOnChanges(changes: SimpleChanges) {
     if (changes['pessoaFisica']) {
       const cnpjControl = this.form.get('cnpj');
       if (this.pessoaFisica) {
         cnpjControl?.disable({ emitEvent: false }); // 可选：禁用时不触发值变更事件
       } else {
         cnpjControl?.enable({ emitEvent: false });
       }
     }
   }
   

3. （可选）如果用响应式表单，也可以通过订阅变量的变化来控制，比如把pessoaFisica改成BehaviorSubject：

pessoaFisica$ = new BehaviorSubject<boolean>(true);

ngOnInit() {
  this.pessoaFisica$.subscribe(isDisabled => {
    const cnpjControl = this.form.get('cnpj');
    isDisabled ? cnpjControl?.disable() : cnpjControl?.enable();
  });
}

// 之后修改状态时调用
this.pessoaFisica$.next(false);

注意：不要同时在模板里用[disabled]和控件API设置禁用，会导致状态不一致，Angular会抛出警告。

内容的提问来源于stack exchange，提问作者Eduardo Nunes