How add dynamic fields in angular form

Question

I have to create a dynamic form where label and input fields will both are text-field(user will fill at run time). And user can add as many as fields he requires. I have requirements where I have to generate. property file in backend. Where key-value pair is required and the user decides how much key-value pair he needs.

You need to use FormArray of FormGroup. You should share your code. — navnath
– navnath, Commented Sep 29, 2021 at 21:16

navnath · Accepted Answer · 2021-09-29 21:37:14Z

1

Create FormGroup as

  keyValueFA = new FormArray([this.newKeyValueFG]);

  propertyFG = new FormGroup({
    keyValue: this.keyValueFA,
  });

getter to create new FormGroup

  get newKeyValueFG(): FormGroup {
    return new FormGroup({
      key: new FormControl(null),
      value: new FormControl(null),
    });
  }

Other methods to set, remove, get FormGroup

  get keyValueArrayFGControls(): FormGroup[] {
    return this.keyValueFA.controls as FormGroup[];
  }

  addNewKeyValueFG(): void {
    this.keyValueFA.push(this.newKeyValueFG);
  }

  removeNewKeyValueFG(index: number): void {
    this.keyValueFA.removeAt(index);
  }

In template iterate keyValueArrayFGControls

<form [formGroup]="propertyFG">
  <div
    formArrayName="keyValue"
    *ngFor="let fg of keyValueArrayFGControls; let i = index"
  >
    <div [formGroup]="fg">
      {{ i + 1 }})
      <div><input type="text" formControlName="key" placeholder="Key" /></div>
      <div>
        <input type="text" formControlName="value" placeholder="Value" />
      </div>
      <button (click)="removeNewKeyValueFG(i)">Remove</button>
    </div>
  </div>
  <button (click)="addNewKeyValueFG()">Add</button>
</form>

Working demo

answered Sep 29, 2021 at 21:37

navnath

3,7241 gold badge13 silver badges20 bronze badges

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

2 Comments

Amar Over a year ago

Once data is added and we want to update data how we would do that.

navnath Over a year ago

You mean Once data is added in Form; you want to save it in db by API call?

Collectives™ on Stack Overflow

How add dynamic fields in angular form

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related