Angular Reactive Forms, patchValue not working, nested forms

Stackblitz code

Angular, Reactive Forms, Material UI,

I have nested forms setup in split components. I have some fake data setup with InMemoryWebAPI, some of the properties are coming up as undefined although they are displayed in the component above.

Is patchValue the correct way to display initial values retrieved from a database?

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

this.proposal is obtained asynchronously. Anything that directly depends on it (like your patchValue call) must be inside the subscription to use it's value. At the moment, the variable this.proposal is either unassigned or holds the old values by the time patchValue is attempted.

Try the following

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

You can find more info about asynchronous calls here.