Angular表单中formControl状态为DISABLED时如何禁用提交按钮

你当前的禁用条件逻辑完全写反了：使用&&代表需要两个条件同时满足才会触发禁用，且第二个条件的判断逻辑和你的需求相悖，最终导致禁用规则不符合预期。

你需要的是任意一个禁用场景触发就禁用提交按钮，直接修改模板里的[disabled]条件即可：

<button type="button" 
        [disabled]="!form.valid || form.controls.productType.status === 'DISABLED'" 
        (click)="submit()">
</button>

上述条件的逻辑完全匹配你的需求：

• 只要表单校验不通过，按钮禁用
• 只要productType处于DISABLED状态，不管表单校验是否通过，按钮都禁用
• 仅当「表单校验通过 + productType未被禁用」两个条件同时满足时，按钮才允许点击

如果不想模板里写过长的判断逻辑，可以在组件类里封装一个getter来维护禁用规则，可读性和可维护性更高：

get isSubmitDisabled(): boolean {
  return !this.form.valid || this.form.controls.productType.status === 'DISABLED';
}

模板中直接绑定即可：

<button type="button" [disabled]="isSubmitDisabled" (click)="submit()"></button>

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