大佬教程收集整理的这篇文章主要介绍了Angular Reactive Forms，patchValue 不工作，嵌套表单，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
Stackblitz code
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 的更多信息。
以上是大佬教程为你收集整理的Angular Reactive Forms，patchValue 不工作，嵌套表单全部内容，希望文章能够帮你解决Angular Reactive Forms，patchValue 不工作，嵌套表单所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。