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屋!