Angular2 Forms禁用具有数据绑定值的组件中的控件-Java 学习之路

我在用户未处于编辑模式时禁用控件 .

this.theForm = this.builder.group({
   name: [{ value: this.model.name, disabled: !this.isEditMode}, Validators.required],
})

当他们改为编辑模式时，我想要启用控件 . 但是，似乎一旦设置它就不会改变，然后组件值会改变 .

当我在标记中有这个时，这工作正常：

<input [disabled]="!isEditMode" type="text" formControlName="name"  />

这导致运行时警告，表明我使用formControl处理它 .

这是警告：

看起来您正在使用带有反应式表单指令的disabled属性 . 如果在组件类中设置此控件时将disabled设置为true，则实际将在DOM中为您设置disabled属性 . 我们建议使用此方法来避免“检查后更改”错误 .

设置控件时有没有办法绑定这个值？我是否需要循环控制并在每次更改时切换它？

1 回答

您可以订阅控件更改并在那里更新，就像这样（我的头脑）：

ngOnInit() {
    for (let nut of this.userSettings.nutrientData) {
      this.foodSettingsForm.controls[nut.abbr].valueChanges
          .subscribe(v => { 
              this.completeValueChange(nut.abbr, v, (mode=="edit" ? false : true));
      });
   }
}

completeValueChange(field: string, value: boolean, disable: boolean) {
   this.myForm.controls[myField]
      .setValue(({value: vale, disabled: disable}, { onlySelf: true });
}

回复于 2024-05-06T12:17:32+08:00

Angular2 Forms禁用具有数据绑定值的组件中的控件

1 回答

相关问题