在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
控件的值,并将其打印到控制台上。
希望以上示例能帮助到你!