Angular2活性形式 - 禁用表单控件动态地从条件

我有，我想根据条件动态地禁用选择控制：Angular2活性形式 - 禁用表单控件动态地从条件

this.activityForm = this.formBuilder.group({ 
    docType: [{ value: '2', disabled: this.activeCategory != 'document' }, Validators.required] 
});

然而，DOCTYPE不会成为被启用，即使在某些时候这.activeCategory变成'文档'。

我该如何解决这个问题？

来源

2017-05-15 franco

因为我不知道你是如何操纵activeCategory（也许这也是一个FormControl？），我会建议使用以下方法：

您可以如下使用(change)时this.activeCategory发生了变化进行检测，：

1 - 如果你正在使用ngModel：

<input type="text" [(ngModel)]="activeCategory" (change)="checkValue($event)">

2 - 如果它是一个FormControl：

<input type="text" formControlName="activeCategory" (change)="checkValue($event)">

所以，在组件，你可以操纵使用disable/enable方法docType控制：

checkValue(event: Event) { 
    const ctrl = this.activityForm.get('docType'); 

    if (event.value === 'document') { 
    ctrl.enable(); 
    } else { 
    ctrl.disable(); 
    } 
}

来源

2017-05-16 01:59:26 developer033

您必须以不同于其他HTML元素的方式处理选定元素。当this.activeCategory更改时，您将必须执行重置。

事情是这样的：

this.activityForm.controls['docType'].reset({ value: '2', disabled: false });

当然，你可能会想使用的电流值，而不是硬编码'2'。

同样的事情要禁用它，如果需要出现（它可能会）。上纳克形式控制reset

this.activityForm.controls['docType'].reset({ value: '2', disabled: true });

的更多信息。

来源

2017-05-16 00:27:37

是否有这样做的更好的方式？说'setValue'或'patchValue'？ – Kody

@Kody对于启用/禁用选择，不是我所知道的。 'setValue'和'patchValue'用于改变窗体控件的值，而不是可视状态。 –

Angular2活性形式 - 禁用表单控件动态地从条件

回答

相关问题