Angular2 - 从元素中删除禁用属性 [英] Angular2 - Removing disabled attribute from element

问题描述

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

点击此按钮后，我将禁用输入.

HTML:

<div class="input-group"><ng-select #cc formControlName="costCenter" (removed)="updateChoices(cc.active, 'costCenter')" [allowClear]="true" [multiple]="true"[items]="getCostCenters()" placeholder="选择一个或多个成本中心"></ng-select><span class="input-group-btn"><button #b_cc class="btn btn-sm btn-default" type="button" title="更新过滤器" (click)="updateChoices(cc.active, 'costCenter', cc, b_cc)"><;i class="fa fa-filter"></i></button></span>

组件功能:

/*** 选择数据点后，重新加载可用选项* 基于所选数据.** @param formValues* @param 字段*/updateChoices(formValues, field, selectInput, button): void {//显示加载指示器this.showLoader = true;//设置和获取数据this.selectedFields[field] = formValues;this.getFields(this.selectedFields, false);//禁用我们的搜索字段和过滤器按钮button.disabled = true;selectInput.disabled = true;}

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

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

我尝试使用 this.importForm.controls['costCenter'].enable(); 通过我的响应式表单来完成此操作，但没有做任何事情.

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

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

this.importForm.reset({成本中心:{值:[]，禁用:假}，});

我在这里遗漏了什么?

解决方案

显然解决方案是 此处.

这对我有用

I have a form that is using a directive called ng-select which enhances select inputs. In my setup, I allow a user to make some selections and then click on a "Filter" button.

Upon clicking this button, I disable the input.

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>

Component Function:

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

    }

You can see in the component that I am disabling both the field and the button that they clicked on.

I am now trying to implement a reset method where I can reset all of the fields back to empty, including toggling them to enabled.

I tried doing it through my reactive form by using this.importForm.controls['costCenter'].enable(); but that didn't do anything.

I inspected the form after reset and it gets set back to pristine and not touched, so I know my form reset is working, the re-enabling is not though.

I have also tried to do this in my form reset method as such:

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

What am I missing here?

解决方案

Apparently solution to this is here.

This worked for me

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

这篇关于Angular2 - 从元素中删除禁用属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！