Angular 2禁用的控件不包含在 form.value 中

我已经注意到，如果我在一个角度2反应形式禁用控件，那么控件不包括在 form.value 中。例如，如果我像下面这样定义我的表单:

this.notelinkingForm = new FormGroup({
Enabled: new FormControl(settings.Enabled, Validators.required),
LinkToPreceeding: new FormControl({value: settings.LinkToPreceeding, disabled: !settings.Enabled}, Validators.required),
LinkingTolerance: new FormControl({value: settings.LinkingTolerance, disabled: !settings.Enabled}, Validators.required)
});

并检查 this. notelinkingForm.value，如果所有控件都被启用，那么输出将是:

{"Enabled":true, "LinkToPreceeding": true, LinkingTolerance:"100"}

但是，当一些控件被禁用时，它将是:

{"Enabled":true}

注意如何排除禁用的控件。

我的意图是，当表单发生变化时，我希望能够将 form.value 及其中的所有属性传递给我的其他 API。如果它不包含禁用的项目，这显然是不可能的。

我是漏掉了什么，还是这是预期的行为？有没有办法告诉 Angular 在 form.value 中包含禁用的项目？

欢迎你的想法。

62158

小开

最佳答案

你可使用:

this.notelinkingForm.getRawValue()

来自有角度的医生:

如果希望包含所有值，而不管禁用状态如何，请使用此方法。否则，value属性是获取组值的最佳方法。

小开

我使用的另一个选项是:

this.form.controls['LinkToPreceeding'].value;

小开

谢谢你给我80% 我所需要的。

对于那些寻找同样问题的解决方案，但是对于嵌套的形式，我可以通过改变我的惯例来解决

this.notelinkingForm.get('nestedForm').value

到

this.notelinkingForm.getRawValue().nestedForm

小开

如果您使用 readonly而不是 disabled，它仍然是不可编辑的，而数据将包含在表单中。但这不是所有情况下都可能的。例如，它不适用于单选按钮和复选框。见 MDN 网络文档。在这些情况下，你必须申请这里提供的其他解决方案。

小开

有两种方法可以得到禁用的表单值。首先

 onSubmit(){
for (const prop in this.formControl.controls) {
this.formControl.value[prop] = this.formControl.controls[prop].value;
}
}

第二条路可以在 onSubmit 事件中启用表单

 onSubmit(){
this.formControl.enable()
//Your logical/operational statement goes here


//at last if you wish you can again disable your form like this
this.formControl.disable();
}