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

Posted 2023-05-09

【中文标题】Angular Reactive Forms，patchValue 不起作用，嵌套表单

【英文标题】：Angular Reactive Forms, patchValue not working, nested forms

【发布时间】：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);
  

【参考方案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。