Angular 反應式 Forms，patchValue 不起作用，嵌套 forms

Question

Stackblitz 代碼

Angular，反應性 Forms，材料 UI，

我在拆分組件中嵌套了 forms 設置。 我使用 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); } }

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

您可以在此處找到有關異步調用的更多信息。