Demo Url -- https://stackblitz.com/edit/angular-gncrek?file=src/app/app.component.html

On click of Add Fields Button I am adding formGroup Dynamically to formArray.

if user selects drop down in type dropdown I am showing an Input field where user can add values and click on add button.

Every time user is adding some values in input field and clicks on add I need to show it below as in demo.

But when user adds multiple formGroup it doesnot work. Same value which has been added in the first formGroup reflects in second too if user selects drop down in second formGroup.

Looks like I am missing something. Any help will be highly appreciated.

CodePudding user response：

I did some changes in your code - https://stackblitz.com/edit/angular-p24aj1?file=src/app/app.component.ts

Let me know If this is what you want

CodePudding user response：

I am providing a completely form oriented approach. Please check the below code!

import { OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  public issueFieldsForm: FormGroup;

  public fieldTypeList = [
    { name: 'Text', id: 1 },
    { name: 'Numeric', id: 2 },
    { name: 'Alpha Numeric', id: 3 },
    { name: 'Drop Down', id: 4 },
  ];

  public dropDownvalues: any = [];
  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.issueFieldsForm = this.formBuilder.group({
      issueFields: this.formBuilder.array([]),
    });
  }

  public addNewIssueFields() {
    console.log('add issue fields called ----');
    this.getIssueFormFields().push(this.newIssueField());
    this.dropDownvalues.push([]);
  }

  public getIssueFormFields() {
    return this.issueFieldsForm.get('issueFields') as FormArray;
  }

  public newIssueField() {
    return this.formBuilder.group({
      labelName: '',
      type: '',
      mandatory: false,
      maxcharaters: '',
      dropdownvalue: '',
    });
  }

  public changeFieldTypeList(value: any) {
    console.log(value);
    this.dropDownvalues = [];
  }

  public removeIssueField(issueFieldIndex: any) {
    this.getIssueFormFields().removeAt(issueFieldIndex);
  }

  public addDropDownValue(issueFieldIndex: string) {
    this.dropDownvalues[issueFieldIndex].push({
      value: 'value'   issueFieldIndex,
      id: 1,
    });
  }

}

stackblitz