Angular2 - 从元素中删除禁用属性答案

【问题标题】：Angular2 - Removing disabled attribute from elementAngular2 - 从元素中删除禁用属性
【发布时间】：2018-01-25 05:44:02
【问题描述】：

我有一个表单，它使用名为ng-select 的指令来增强选择输入。在我的设置中，我允许用户进行一些选择，然后单击“过滤器”按钮。

单击此按钮后，我将禁用输入。

HTML：

<div class="form-group">
   <div class="input-group">
      <ng-select #cc formControlName="costCenter" (removed)="updateChoices(cc.active, 'costCenter')" [allowClear]="true" [multiple]="true"
      [items]="getCostCenters()" placeholder="Select one or more Cost Centers">
      </ng-select>
      <span class="input-group-btn">
      <button #b_cc class="btn btn-sm btn-default" type="button" title="Update Filter" (click)="updateChoices(cc.active, 'costCenter', cc, b_cc)"><i class="fa fa-filter"></i></button>
      </span>
   </div>
</div>

组件功能：

    /**
     * Upon selecting a data point, reload available options 
     * based on data selected.
     * 
     * @param formValues 
     * @param field 
     */
    updateChoices(formValues, field, selectInput, button): void {

        // Show the loading indicator
        this.showLoader = true;

        // Set and fetch data
        this.selectedFields[field] = formValues;
        this.getFields(this.selectedFields, false);

        // Disable our search field and filter button
        button.disabled = true;
        selectInput.disabled = true;

    }

您可以在组件中看到我禁用了他们单击的字段和按钮。

我现在正在尝试实现 reset 方法，我可以在其中将所有字段重置为空，包括将它们切换为 enabled。

我尝试使用 this.importForm.controls['costCenter'].enable(); 通过我的反应式表单进行操作，但没有任何效果。

我在重置后检查了表单，它被设置回pristine 而不是touched，所以我知道我的表单重置正在工作，但重新启用却没有。

我也尝试在我的表单重置方法中这样做：

this.importForm.reset({
  costCenter: {value:[], disabled:false},
});

我在这里错过了什么？

【问题讨论】：

为什么禁用 DOM 本身而不是 FormControl？而不是selectInput.disabled = true; 尝试this.importForm.controls['costCenter'].disable()
@HarryNinh 我第一次设置它时确实尝试过，但它不会禁用。当我在运行禁用后检查表单时，它实际上被设置为_status = DISABLED，但 UI 上的输入并没有反映这一点。我开始认为该指令没有正确或根本没有实现反应形式，这就是我必须采用DOM 方法的原因。
是的，我认为罪魁祸首是ng-select 指令。如果您不能使用 FormControl 禁用选择，则不能指望启用选择 使用 FormControl 会起作用。
有没有办法从组件中更新 dom 来实现这一点？我知道这不是建议的方式，但在我看看创作者是否能解决这个问题之前，我需要一些创可贴
我对输入文本字段有类似的问题。见这里stackoverflow.com/questions/47091397/…

标签： angular typescript angular-reactive-forms

【解决方案1】：

显然解决方案是here。

这对我有用

<input [attr.disabled]="IsTextBoxDisabled?'true':null">

【讨论】：