Angular 2 - 根据另一个表单控件的值禁用表单控件

Question

我需要帮助根据Angular 2中的值禁用特定表单控件的值。

只要另一个字段期间的值“生命周期”，就需要禁用字段 - startDate 。否则需要启用它。此外，每当加载应用时，默认值期限为“生命周期”，因此在加载表单时会禁用 startDate 。 / p>

所以这是我在组件中编写的代码：

protected onMetadataLoaded() {
const startDateControl = this.metadata.form.controls.startDate;
startDateControl.disable();
const periodControl = this.metadata.form.controls.period;
periodControl.valueChanges
    .distinctUntilChanged()
    .subscribe(period => {
        if(period !== "Lifetime") {
            startDateControl.enable();
        } else {
            startDateControl.disable();
        }
    });

}

这允许我在将周期值从生命周期更改为任何其他值时启用startDateControl。但是，如果我再次选择周期值为 Lifetime ，则不会禁用startDateControl。

我猜它只检查了一次，因为我把代码放在MetadataLoaded（）中。我不确定我是如何进行的，以便它继续监视periodControl的值变化，并根据周期值启用和禁用startDateControl。

仅为完整性：期间字段具有以下值 - 每月，每季度，每年，终身。

提前致谢！

编辑：

所以这就是我的模板：

<dynamic-form-item name="storeID" [metadata] = "metadata" type="chooser"></dynamic-form-item>
<dynamic-form-item name="period" [metadata] = "metadata"></dynamic-form-item>
<dynamic-form-item name="startDate" [metadata] = "metadata"></dynamic-form-item>

基本上是一堆动态表单项。