Angular Reactive Forms，patchValue 不起作用，嵌套表单答案

【问题标题】：Angular Reactive Forms, patchValue not working, nested formsAngular Reactive Forms，patchValue 不起作用，嵌套表单
【发布时间】：2021-06-07 00:24:42
【问题描述】：

Stackblitz code

Angular、响应式表单、材质 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: ["", [Validators.required]],
      address1: ["", [Validators.required]],
      address2: ["", [Validators.required]],
      city: ["", [Validators.required]],
      state: ["", [Validators.required]],
      zipCode: ["", [Validators.required, Validators.minLength(5)]],
      phoneNumber: ["", [Validators.required]],
      emailAddress: ["", [Validators.required, 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);
  }
}

【问题讨论】：

标签： angular nested-forms angular10 reactive-forms

【解决方案1】：

this.proposal 是异步获取的。任何直接依赖它的东西（比如你的patchValue 调用）都必须在订阅中才能使用它的价值。目前，变量this.proposal 要么未赋值，要么在尝试patchValue 时保持旧值。

试试下面的

ngOnInit() {
  this.memberInfoForm = this.fb.group({
    firstName: ["", [Validators.required]],
    lastName: ["", [Validators.required]],
    address1: ["", [Validators.required]],
    address2: ["", [Validators.required]],
    city: ["", [Validators.required]],
    state: ["", [Validators.required]],
    zipCode: ["", [Validators.required, Validators.minLength(5)]],
    phoneNumber: ["", [Validators.required]],
    emailAddress: ["", [Validators.required, 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。

【讨论】：