在Angular 6中,当使用Reactive Form的updateOn: 'submit'
选项时,表单的值只会在提交时更新。如果你希望在提交后也能更新值,可以使用以下解决方法:
首先,在你的组件类中创建一个FormGroup
对象并设置updateOn: 'submit'
选项:
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
{{ myForm.value | json }}
`
})
export class MyFormComponent {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
name: new FormControl('', { updateOn: 'submit' })
});
}
onSubmit() {
// 提交表单时,更新值
this.myForm.controls['name'].updateValueAndValidity();
}
}
在上面的例子中,我们创建了一个myForm
的FormGroup
对象,并在name
控件上设置了updateOn: 'submit'
选项。在表单提交时,我们手动调用updateValueAndValidity()
方法来更新name
控件的值。
注意,在模板中,我们使用了管道操作符|
和json
来显示表单的值。这样我们就能在提交后看到更新后的值。
这样,当你提交表单时,表单的值就会被更新,并且在提交后也能正确显示更新后的值。