Angular 2 [disabled] 仅适用于某些控件

Question

我有一个大表单，它是根据我从服务器提供的数据动态生成的。为了生成单选按钮，我使用以下 HTML:

<ng-container *ngSwitchCase="'RADIO'">
  <td *ngFor="let option of item.SelectOptions">
    <div class="input-group">
      <input type="radio"
        [(ngModel)]="item.PricingSelectIndex"
        name="{{ item.UIName }}RadioButton"
        id="{{ item.UIName }}{{ option.PricingSelectIndex }}"
        [value]="option.PricingSelectIndex"
        [disabled]="item.ReadonlyTF"
        (click)="saveField(item.UIName, 'SelectIndex', option.PricingSelectIndex)" />
      <label for="{{ item.UIName }}{{ option.PricingSelectIndex }}" style="margin-left: 5px;">
        {{ option.Label }}
        <i class="fa fa-question-circle" [tooltip]="item.TooltipText" placement="right" *ngIf="item.TooltipText"></i>
      </label>
    </div>
  </td>
</ng-container>

显然，这是一个更大页面的一部分，它查看数据中的每个项目，并根据项目的 ControlType 属性生成表单——这是单选按钮的 HTML。数据项包括一个名为 ReadonlyTF 的属性，它告诉我是否应该禁用控件(例如只读)。然后该项目包括一个 SelectOptions 属性，该属性是一组较小的项目，每个项目都映射到集合中的一个单选按钮。 (例如，我遇到问题的控件有两个 SelectOptions，一个是是，一个是否。)因此，每个单选按钮都使用相同的 HTML 生成。

这是奇怪的事情。在有问题的控件中，生成的第一个单选按钮被禁用(这是我想要的)，但第二个不是。



如果仔细观察，您会发现 Yes 已禁用，但 No 未禁用!下面是这两个控件在 Chrome 的 Elements 选项卡中的呈现方式:



两者都包括 ng-reflect-is-disabled="true"但实际上只有第一个被禁用。缺少第二个按钮 ng-reflect-value .同样，这些是使用完全相同的 HTML 片段呈现的。

我使用 Angular 2.4.6、Typescript 2.1.5、bootstrap 3.3.7 和 angular-cli 进行编译。组件中没有支持 TS 会影响这一点:我获取数据并将其弹出到一个属性中，然后由 HTML 模板选取，仅此而已。我认为这可能是某种更改检测问题，但强制使用 changeDetectorRef.detectChanges()什么也没做。我对此很困惑，但我不能有一个事件的单选按钮供任何人点击!

谢谢!

Answer 1

发生这种情况的原因是您有多个带有 NgModel 的输入元素。指令和相同的 name属性。 NgModel 内部逻辑切换 disable()和 enable()在基于 disabled 的值的表单控件上输入。由于名称冲突，您只有一个表单控件，因此在某些地方，只有第一个元素得到更新。

使名称属性唯一，您的问题就会消失。

如果您查看 ng_model.ts 的源代码，您可以了解此行为。 .