如何用Angular响应式表单写回嵌套属性?

Question

如何用Angular响应式表单填充属性?

今天我开始更深入地使用反应形式，并立即遇到了理解问题。以前，我总是用ngModel写表单，并构建了这样的东西:

<input [(ngModel)]="data.name" />
<input [(ngModel)]="data.setings.property1" />
<input [(ngModel)]="data.setings.property2" />

对于反应式表单，它看起来像这样:

<form [formGroup]="myForm">
<input formControlName="name" />
<input formControlName="property1" />
<input formControlName="property2" />
</form>
** Compoennt Init **
this.myForm = this.fb.group({
name: new FormControl({ value: this.data.name }, [Validators.required, Validators.minLength(3)]),
property1: new FormControl({ value: this.data.setings.property1 }, Validators.required),
property2: new FormControl({ value: this.data.setings.property2 }, Validators.required),
})

到目前为止一切顺利。我现在的问题是:我如何得到改变的值回到this.data?我发现的唯一东西是这样的:

this.myForm.valueChanges.subscribe(val => {
....
});

由于我的实际数据结构相对复杂，并且包含许多嵌套属性，所以我现在必须手动分配所有内容，a'la:

if (val == 'property1')
data.setings.property1 = val;
else if 
...

那对我来说似乎很复杂。因为这样的事情可以快速，轻松地完成与ngModel，我想知道是否有一个类似的舒适的反应形式的选择?

Answer 1

可以使用嵌套的FormGroup

查看使用FormGroupName

的示例这样，当实例化表单时:

form = new FormGroup({
name: new FormGroup({
first: new FormControl('Nancy', Validators.minLength(2)),
last: new FormControl('Drew', Validators.required)
}),
email: new FormControl()
});

:

<form [formGroup]="form" (ngSubmit)="onSubmit()">
<p *ngIf="name.invalid">Name is invalid.</p>
<div formGroupName="name">
<input formControlName="first" placeholder="First name">
<input formControlName="last" placeholder="Last name">
</div>
<input formControlName="email" placeholder="Email">
<button type="submit">Submit</button>
</form>

可以检索结构

{
name: {
first: string,
last: string,
},
email: string,
}

当做form.value.

Answer 2

我得到的值如下:this.myForm.get("property1").value