Angular add another row form

Issue

I am sending my form value as object to API, i want if user adds another row of same form save it in my finalData object. now it copys inputs with same value and overwrites with last ones data. for example if user has 2 rows return object like this:

{
    "repairs": [
        {
            "repairId": "name",
            "comment": "test"
        },
        {
            "repairId": "name2",
            "comment": "test2"
        }
    ]
}

here is my stackblitz

.ts

createEstimation!: FormGroup;
  finalData:any;

  defaultForm = {
    carParts: [],
  };

  defaultForm2 = {
    handicraft: [],
  };

  carParts: any[] = [this.defaultForm];
  handicraft: any[] = [this.defaultForm2];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.createEstimation = this.fb.group({
      repairCategory: [''],
      repairComment: [''],
    });
  }

  // create another field
  create(array: any, form: any) {
    array.push(form);
  }

  sendForm() {
    let value = this.createEstimation.value;
    this.finalData = {
      repairs: [
        {
        repairId: value.repairCategory,
        comment: value.repairComment,
        }
      ],
    }
    console.log(this.finalData);
  }

Solution

For this type of form you need to use FormArray.

Here is the working Stackblitz

Component.ts

ngOnInit(): void {
 this.createForm();
}

createForm() {
  this.createEstimation = this.fb.group({
    repairs: this.fb.array([this.initData()]),
  });
}

initData() {
  return this.fb.group({
    repairCategory: [''],
    repairComment: [''],
  });
}

//getter function ease up to get the form controls
get formArr() {
  return this.createEstimation.get('repairs') as FormArray;
}

// create another field
create(array: any, form: any) {
  let formgroup = this.fb.group({
    repairCategory: [''],
    repairComment: [''],
  });
  this.formArr.push(formgroup);
}

component.html

<form [formGroup]="createEstimation">
<div formArrayName="repairs">
  <div
    class="content-desc mt-4"
    *ngFor="let obj of formArr.controls; let i = index; let l = last"
    [formGroupName]="i"
  >
  <div class="car-parts" first as isFirst>
    <div class="row">
      <div class="col-lg-6">
        <label class="form-label"
          >Repairs <span class="required">*</span></label
        >
      </div>
      <div class="col-lg-6">
        <label class="form-label">Comment</label>
      </div>
    </div>
    <div class="row mt-2">
      <div class="col-lg-6">
        <div class="row gray-bg">
          <div class="col-lg-4">
            <label class="form-label">category</label>
            <mat-form-field appearance="fill" class="nusx">
              <mat-label> category</mat-label>
              <mat-select #multiSelect formControlName="repairCategory">
                <mat-option> </mat-option>
                <mat-option *ngFor="let item of Repairs" [value]="item">{{
                  item
                }}</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <textarea
          class="form-control mt-2"
          name=""
          id=""
          cols="30"
          rows="10"
          formControlName="repairComment"
        ></textarea>
       </div>
     </div>
    </div>
  </div>
</div>
<div class="row mt-5">
  <div class="col-lg-10">
    <hr />
  </div>
  <div class="col-lg-2">
    <button
      type="button"
       class="btn-green add"
      (click)="create(this.handicraft, this.defaultForm2)"
    >
     <i class="fas fa-plus"></i> Add another row
   </button>
  </div>
</div>

<button (click)="sendForm()">Send</button>

<pre>{{ createEstimation.value | json }}</pre>
</form>

Output

{
  "repairs": [
    {
      "repairCategory": "endDate",
      "repairComment": "test data 1 "
    },
    {
      "repairCategory": "sum",
      "repairComment": "test data 2"
    }
  ]
}

Answered By - Anuj.T