Angular Reactive Forms, patchValue not working, nested forms

Question

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

Barremian · Accepted Answer · 2021-03-09 07:15:13Z

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.

Collectives™ on Stack Overflow

Angular Reactive Forms, patchValue not working, nested forms

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related