Angular 6 getRawValue()不会返回禁用的值

Question

我有一个如下的示例表单：

stuff: IStuff; 
buildForm() {
this.createForm = this.form.group({
Val1: [{ value: '', disabled: true }],
Val2: [{ value: '', disabled: true }]
});

正如您所看到的，这两个值都设置为禁用。

构造函数触发httpClient获取并填充模型：

this.exampleHttpService.getStuff()
.subscribe(stuff => this.stuff = stuff); 

东西在哪里：

export interface IStuff {
Val1?: number; 
Val2?: number
}

在html中为Val1和Val2进行绑定，如下所示：

<input name="Val1" matInput formControlName="Val1" [value]="stuff?.Val1">

这一切都是上帝，它很好地分配了值并将其显示在屏幕上；然而，当我试图使用取回这些值时

this.createForm.getRawValue()

我得到两个值的"空字符串。。。

知道吗？

Answer 1

当您使用反应式表单时，输入值已经绑定到表单控件，您不需要(也不应该(绑定到输入的值，因为值和表单控件不是一回事。在代码中，您正在初始化绑定到输入值的"stuff"，但没有初始化表单控件值。您需要初始化表单控制值：

this.exampleHttpService.getStuff()
.subscribe((stuff) => {
this.createForm.controls['Val1'] = stuff.Val1;
this.createForm.controls['Val2'] = stuff.Val2;
}); 

Answer 2

从服务中获取数据后，是否在FormControls上设置Value？从我看到的代码中，您将FormControls初始化为空字符串，这让我猜测您可能没有设置值？

Answer 3

初始化反应表单的正确方法是：

stuff: IStuff; 
buildForm() {
//Get value for stuff before initializing form
this.createForm = this.form.group({
Val1: [{ stuff.Val1: '', disabled: true }],
Val2: [{ stuff.Val2: '', disabled: true }]
});

这里另一个值得注意的点是，为了获得form的值，this.createForm.value不会为禁用的控件提供更新的值。在这种情况下this.createForm.getRawValue()是选项。

Answer 4

上述代码中的问题是您正在初始化表单，但没有将值绑定到表单。相反，从上述方法中，您使用属性绑定将值绑定至模板，但没有绑定值至表单本身。

如果您使用的是Reactive表单，请始终绑定数据并使用表单本身更新数据。

this.exampleHttpService.getStuff()
.subscribe((stuff) => {
this.createForm.get('Val1').setValue(stuff.Val1);
this.createForm.get('Val2').setValue(stuff.Val2);
}); 

或

this.exampleHttpService.getStuff()
.subscribe((stuff) => {
this.createForm.get('Val1').patchValue({
Val1: stuff.Val1
val2: stuff.Val2
});

}); 

表单的getRawValue((和值之间的差异为getRawValue((获取所有字段数据，value只获取启用字段(禁用字段将从Object中删除(