时间戳

首页 > 解决方案 > Angular Reactive Forms，patchValue 不起作用，嵌套表单

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

问题描述

Stackblitz 代码

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);
  }
}

标签： angularnested-formsangular10reactive-forms

解决方案

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")
  });
}

您可以在此处找到有关异步调用的更多信息。

推荐阅读