CODEWITHSUNDEEP
angulartypescriptangular8angular-reactive-formsangular-forms
Anjali
Anjali

Reputation: 11

How to edit data of dynamically created form in angular 8

I am new to Angular developmet.In my project,I have a form with dynamically add and remove input box using Add and Remove button in Angular 8 Application. After submitting the form,i want to display and edit the input fields with the same add and remove button. How can i achieve the functionality in edit.

I share the stackblitz url of creating a dynamic form with add and remove button.I need the same form for edit. Can anyone help me to give solution? https://stackblitz.com/edit/angular-dynamic-form-fields-y2ijvu?file=src%2Fapp%2Fapp.component.ts

Upvotes: 1

Views: 1545

Answers (1)

user776686
user776686

Reputation: 8655

In order to populate the phones with dynamically received values (eg from api), you would need to add a parameter to addPhone() and call it when iterating over the received values.

  addPhone(phone: string): void {
    (this.userForm.get('phones') as FormArray).push(phone);
  }

receivedPhones.forEach(phone => this.addPhone(phone))

or you could .setValue() or .patchValue() of the FormArray like so:

this.userForm.get('phones').setValue(receivedPhones)

(setValue() requires that the array has equal member count)

It is possible to share one form for edit and view situations, just add a flag isNew and populate it, and use it. Oftentimes, the edit functionality resides at a different route (.../edit) which enables you to provide isNew: true on the route's data definition.

Upvotes: 1

Related Questions