在Angular中,如果从异步调用中获取的值无法更新响应式表单,可能的原因是异步调用的值在表单初始化之后返回。这可能会导致表单控件不会自动更新。为了解决这个问题,可以采取以下解决方法:
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { DataService } from 'path-to-data-service';
@Component({
selector: 'app-your-component',
template: `
`,
})
export class YourComponent implements OnInit {
myForm: FormGroup;
constructor(private dataService: DataService) {}
ngOnInit() {
this.myForm = new FormGroup({
myControl: new FormControl(),
});
this.dataService.getData().subscribe((data) => {
this.myForm.get('myControl').setValue(data);
});
}
}
在上述代码中,使用setValue方法手动设置表单控件的值来更新表单。
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { DataService } from 'path-to-data-service';
@Component({
selector: 'app-your-component',
template: `
`,
})
export class YourComponent implements OnInit {
myForm: FormGroup;
constructor(private dataService: DataService) {}
ngOnInit() {
this.myForm = new FormGroup({
myControl: new FormControl(),
});
this.myForm.get('myControl').valueChanges.subscribe((value) => {
this.dataService.updateData(value);
});
this.dataService.getData().subscribe((data) => {
this.myForm.get('myControl').setValue(data);
});
}
}
在上述代码中,使用valueChanges方法订阅表单控件值的变化,并在变化时更新数据服务。
这些解决方法可以确保从异步调用中获取的值能够正确更新Angular响应式表单。
上一篇:Angular响应式表单-禁用必填表单控件使表单有效,即使没有给出任何值
下一篇:Angular响应式表单-OnPush时setErrors不会更新FormArray内的FormControl视图。