在Angular的响应式表单中,我们可以使用属性或者getter来获取表单控件的值。下面是使用属性和getter的良好实践解决方法的示例代码:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
`
})
export class MyFormComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
name: ''
});
}
submit() {
console.log(this.myForm.value.name);
}
}
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, AbstractControl } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
`
})
export class MyFormComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
name: ''
});
}
get name(): AbstractControl {
return this.myForm.get('name');
}
submit() {
console.log(this.name.value);
}
}
无论是使用属性还是getter,它们都有各自的优势和用途。属性可以直接在模板中使用,而getter可以在组件中进行额外的处理或验证。根据具体情况来选择使用哪种方式来获取表单控件的值。