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

SBB*_*SBB 4 typescript angular angular-reactive-forms

我有一个使用名为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>
Run Code Online (Sandbox Code Playgroud)

组件功能:

    /**
     * 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;

    }
Run Code Online (Sandbox Code Playgroud)

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

我现在正在尝试实现一种reset方法,可以将所有字段重置为空,包括将它们切换为enabled.

我尝试通过使用我的反应形式来this.importForm.controls['costCenter'].enable();做到这一点,但这没有做任何事情。

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

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

this.importForm.reset({
  costCenter: {value:[], disabled:false},
});
Run Code Online (Sandbox Code Playgroud)

我在这里缺少什么?

Tem*_*ary 8

显然解决这个问题是here

这对我有用

<input [attr.disabled]="IsTextBoxDisabled?'true':null">
Run Code Online (Sandbox Code Playgroud)