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 的更多信息。