Angular Ng-Zorro单选框联动输入框禁用异常问题求助

问题根源 #

你的代码不符合需求的核心原因是初始状态设置错误：当前selectedOption默认值设为'option1'，导致第一个输入框一开始就处于启用状态，无法满足“初始两个输入框均禁用”的要求。此外需确认Angular表单模块与NgZorro组件已正确导入，否则双向绑定和组件功能会失效。

修正后的代码 #

TypeScript 代码 #

selectedOption: string | null = null; // 初始设为null，让两个输入框都保持禁用
input1: string = '';
input2: string = '';

HTML 代码 #

<nz-radio-group [(ngModel)]="selectedOption">
  <label nz-radio nzValue="option1">Option 1</label>
  <label nz-radio nzValue="option2">Option 2</label>
</nz-radio-group>

<nz-input-group>
  <input nz-input [(ngModel)]="input1" [disabled]="selectedOption !== 'option1'" />
</nz-input-group>

<nz-input-group>
  <input nz-input [(ngModel)]="input2" [disabled]="selectedOption !== 'option2'" />
</nz-input-group>

必要的模块导入检查 #

确保你的业务模块中已导入以下依赖，否则ngModel和NgZorro组件无法正常工作：

import { FormsModule } from '@angular/forms';
import { NzRadioModule } from 'ng-zorro-antd/radio';
import { NzInputModule } from 'ng-zorro-antd/input';

@NgModule({
  imports: [
    FormsModule,
    NzRadioModule,
    NzInputModule
    // 其他业务模块
  ]
})
export class YourBusinessModule { }

修改后，初始状态下selectedOption为null，两个输入框的禁用条件均成立；选择对应单选框时，selectedOption更新为对应值，自动触发输入框的启用/禁用切换，完全匹配需求逻辑。

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