如何解决Angular Reactive Forms,patchValue 不工作,嵌套表单
Angular、Reactive Forms、Material UI,
我在拆分组件中设置了嵌套表单。我使用 InMemoryWebAPI 设置了一些假数据,尽管它们显示在上面的组件中,但某些属性显示为未定义。
patchValue 是显示从数据库中检索到的初始值的正确方法吗?
export class WorksheetComponent implements OnInit {
worksheetForm: FormGroup;
memberInfoForm: FormGroup;
proposal: any;
constructor(
private fb: FormBuilder,private proposalService: ProposalService
) {}
getProposal(): void {
this.proposalService.getProposal().subscribe((proposal: Proposal) => {
(this.proposal = proposal),err => console.log(err),() => console.log("successfully retrieved proposal data");
});
}
ngOnInit() {
this.getProposal();
this.memberInfoForm = this.fb.group({
firstName: ["",[Validators.required]],lastName: ["",address1: ["",address2: ["",city: ["",state: ["",zipCode: ["",[Validators.required,Validators.minLength(5)]],phoneNumber: ["",emailAddress: ["",Validators.email]]
});
this.worksheetForm = this.fb.group({
memberInfoForm: this.memberInfoForm
});
this.worksheetForm.patchValue({
memberInfoForm: {
firstName: this.proposal.borrower.firstName,lastName: this.proposal.borrower.lastName,address1: this.proposal.borrower.address1,address2: this.proposal.borrower.address2,city: this.proposal.borrower.city,state: this.proposal.borrower.state,zipCode: this.proposal.borrower.zipCode,phoneNumber: this.proposal.borrower.phoneNumber,emailAddress: this.proposal.borrower.emailAddress
}
});
}
onSubmit() {
console.log(this.worksheetForm.value);
}
}
解决方法
this.proposal
是异步获取的。任何直接依赖于它的东西(比如你的 patchValue
调用)都必须在订阅中才能使用它的值。目前,变量 this.proposal
要么未赋值,要么在尝试 patchValue
时保留旧值。
试试下面的方法
ngOnInit() {
this.memberInfoForm = this.fb.group({
firstName: ["",[Validators.required]],lastName: ["",address1: ["",address2: ["",city: ["",state: ["",zipCode: ["",[Validators.required,Validators.minLength(5)]],phoneNumber: ["",emailAddress: ["",Validators.email]]
});
this.worksheetForm = this.fb.group({
memberInfoForm: this.memberInfoForm
});
this.proposalService.getProposal().subscribe({ // <-- call here
next: (proposal: Proposal) => {
this.worksheetForm.patchValue({ // <-- patch the values here
memberInfoForm: {
firstName: this.proposal.borrower.firstName,lastName: this.proposal.borrower.lastName,address1: this.proposal.borrower.address1,address2: this.proposal.borrower.address2,city: this.proposal.borrower.city,state: this.proposal.borrower.state,zipCode: this.proposal.borrower.zipCode,phoneNumber: this.proposal.borrower.phoneNumber,emailAddress: this.proposal.borrower.emailAddress
}
});
},error: err => console.log(err),complete: () => console.log("successfully retrieved proposal data")
});
}
您可以找到有关异步调用 here 的更多信息。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。