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,一个用于Yes,一个用于No.)因此每个单选按钮都生成相同的HTML.

这是奇怪的事情.在所讨论的控件中,生成的第一个单选按钮被禁用(这是我想要的),但第二个单选按钮不是.

如果你仔细观察,你可以看到是被禁用但是没有被禁用!以下是在Chrome的"元素"标签中呈现两个控件的方式:

两者都包括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的源,则可以完成此行为.