对模型驱动表单使用禁用

Posted 2023-03-13

【中文标题】对模型驱动表单使用禁用

【英文标题】：Use disable with model-driven form

【发布时间】：2017-02-02 13:09:05

【问题描述】：

我正在尝试在我的模型驱动表单中使用disabled。我有以下表格：

this.form = this.formBuilder.group(
    val1: ['', Validators.required],
    val2: [value:'', disabled:this.form.controls.val1.valid]
);

我收到错误消息（未找到 this.form 中的 controls）可能是因为我在 this.form 中使用了 this.form。

我该如何解决这个问题？

PS 我也尝试在我的 html 中添加 [disabled]='...'，但我收到警告说我应该改用 formBuilder

【问题讨论】：

嘿，不是应该是val1: fb.control('', Validators.required)，而且你也必须更改 val 2 吗？

@Ced 你可以读到这个：scotch.io/tutorials/…

它说了我的话。不知道我是否脱离了循环。检查我的答案，如果它完全不是你想要的，我会删除它

【参考方案1】：

是的，你是对的，问题是因为你引用了一个尚未启动的变量 (this.form)。幸运的是，在您的情况下，您实际上并不需要在 val2 表单控件中引用表单组。您的代码可以重写如下：

let val1Control = this.formBuilder.control('', Validators.required);
this.form = this.formBuilder.group(
    val1: val1Control ,
    val2: [value:'', disabled: val1Control.valid]
);

但是，此块仅启动 val2 控件的disabled 值，而不监控val1Control 的有效性。为此，您需要订阅val1Control.statusChanges：

let val1Control = this.formBuilder.control('', Validators.required);
let val2Control = this.formBuilder.control(value:'', disabled: !val1Control.valid);
this.form = this.formBuilder.group(
  val1: val1Control,
  val2: val2Control
)

val1Control.statusChanges.subscribe((newStatus) => 
  if (val1Control.valid) 
    val2Control.enable();
   else 
    val2Control.disable();
  
);

这是工作的 plunker：http://plnkr.co/edit/kEoX2hN9UcY4yNS3B5NF

【讨论】：

哎呀，这太冗长了……我没想到disabled 这么复杂！无论如何，这是我认为最好的解决方案！谢谢

可爱！节省了我的时间。

帮了我很多忙，非常感谢！在我的情况下（如果你想禁用每个表单字段）this.form.disable(); 工作得很好！

这种情况下如何添加多个验证器？用逗号分隔还是在数组中？