angular5 how to submit nested reactive form

Question

I was able to create nested forms (w/o submit function) by following this code: https://plnkr.co/edit/vSODkb8i7o54X3fST9VF?p=preview

Now, I would like to submit the forms, however, having 2 types of errors:

AppComponent.html:32 ERROR TypeError: Cannot read property 'emails' of undefined
When saving, a new line is created, but the corresponding input is not.

I've created the stackbliz: https://stackblitz.com/edit/angular-tqrest

app.component.ts

constructor(private fb: FormBuilder, 
  private contractService: ContractService) { 
}

ngOnInit() {
  this.contractService.getContracts().subscribe(contracts => {
    this.contracts = contracts;
});

  this.trustForm = this.fb.group({
    contracts: this.fb.array([])
  });

  this.addContract();
}

initContract() {
  return this.fb.group({
    name: '',
    emails: this.fb.array([])
  });
}

addContract() {
  const contractArray = <FormArray>this.trustForm.controls['contracts'];
  const newContract = this.initContract();

  contractArray.push(newContract);
}

removeContract(idx: number) {
  const contractsArray = <FormArray>this.trustForm.controls['contracts'];
  contractsArray.removeAt(idx);
}

onSubmit(contract: Contract) {
  this.contractService.addContract(contract);
}

How can I solve this?

Narm · Accepted Answer · 2018-03-06 15:40:54Z

1

Part 1

You have to pass the Contract in the form to your onSubmit() function.

<form [formGroup]="trustForm" (ngSubmit)="onSubmit(trustForm.value.contracts)">

In addition, you will notice I added the type attribute type="button" to both your 'Add another email +' and 'Add another contact +' buttons. This prevents the onSubmit() event from firing when you click those buttons.

If you remove the type attributes I added to your buttons, you will notice they fire the onSubmit() event every time you click any of them. This is the default html button behavior. By default all buttons are of type="submit" unless explicitly declared otherwise. MDN Docs: The Button Element

Part 2

You will want to update your contract.service.ts to use Rxjs Subjects. Your original approach wouldn't work because you only sent the Observable one time. With the Subject you can continue to send updates as your Contracts array grows or is updated.

See the updated StackBlitz attached for the working code:

StackBlitz Demo

edited Mar 6, 2018 at 15:40

answered Mar 5, 2018 at 22:58

Narm

10.9k5 gold badges46 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Benbirdz Over a year ago

Thanks so much for answering!! But, one last question, the submit button is not submitting to reflect onto the detail section. I am only having a blank additional row after submitting, have tried a couple more methods, but still not working. Appreciate if you can help!

Narm Over a year ago

Updated :) Please mark the answer if it helped.Happy coding! :)

Benbirdz Over a year ago

Super! looks like an area unexplored. Thanks! Happy coding too!

Collectives™ on Stack Overflow

angular5 how to submit nested reactive form

1 Answer 1

Part 1

Part 2

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Part 1

Part 2

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related