在Angular中,可以通过HTML手动更新FormGroup的值。下面是一个示例解决方法:
首先,创建一个FormGroup对象,并在组件中初始化它:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
name: '',
email: ''
});
}
onSubmit() {
console.log(this.myForm.value);
}
}
然后,在HTML模板中使用FormControlName指令来绑定表单控件:
接下来,我们可以在组件中定义一个方法,通过调用FormGroup的setValue方法来手动更新表单的值:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
name: '',
email: ''
});
}
onSubmit() {
console.log(this.myForm.value);
}
updateFormValues() {
this.myForm.setValue({
name: 'John',
email: 'john@example.com'
});
}
}
最后,在HTML模板中添加一个按钮,通过调用updateFormValues方法来手动更新表单的值:
现在,当点击"Update Values"按钮时,表单的值将被更新为预定义的值。