在Angular中,要访问嵌套表单中控件的值,可以使用get()方法来获取控件对象,然后再调用value属性获取控件的值。
以下是一个示例代码:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
personalInfo: this.formBuilder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required]
}),
address: this.formBuilder.group({
street: ['', Validators.required],
city: ['', Validators.required]
})
});
}
onSubmit() {
console.log(this.myForm.get('personalInfo.firstName').value);
console.log(this.myForm.get('personalInfo.lastName').value);
console.log(this.myForm.get('address.street').value);
console.log(this.myForm.get('address.city').value);
}
}
在上面的示例中,我们创建了一个嵌套表单myForm,其中包含一个personalInfo组和一个address组。通过get()方法,我们可以获取到嵌套表单中每个控件的值。
在onSubmit()方法中,我们使用get()方法获取到了personalInfo组中的firstName和lastName控件的值,以及address组中的street和city控件的值,并将其打印到控制台上。
希望以上示例能帮助到你!