在Angular中,显示和绑定嵌套对象的方式有许多种,其中一种方法是使用formGroup和formArray。
假设我们有一个嵌套对象,例如:
{ name: 'John Smith', address: { street: '123 Main St', city: 'Anytown', state: 'CA', zip: '12345' } }
我们可以创建一个表单来显示和绑定这个嵌套对象,如下所示:
import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({ selector: 'app-nested-object-form', templateUrl: './nested-object-form.component.html' }) export class NestedObjectFormComponent {
nestedForm: FormGroup;
constructor(private fb: FormBuilder) { this.nestedForm = this.fb.group({ name: ['', Validators.required], address: this.fb.group({ street: ['', Validators.required], city: ['', Validators.required], state: ['', Validators.required], zip: ['', Validators.required] }) }); }
}
在HTML模板中,我们可以使用formGroup和formControlName指令来显示和绑定表单中的值: