How to persist data in Form Array when editing other Form Control in Angular-CodePudding

I create a Reactive Form to key in user details using Angular. Initially when all data are filled in like this direction (Name, Age, Color), all data will be saved inside the reactive form.

When I started to edit one of the row's Name/Age data, previously selected color will be wipe up and the color Form Array will be empty.

How can I persist the color inside the Form Array when I edit other Form Control?

Or is there any part I am doing wrongly?

Initial Data

After edit one of the data in a row, the colors selected will be gone

<div nz-row >
  <div nz-col nzXs="24" nzXl="24">
    <div nz-row nzType="flex" nzAlign="middle" nzJustify="start">
      <h3 >User Record</h3>
    </div>
  </div>
</div>

<div>
  <nz-table #basicTable [nzData]="getRowControl" [formGroup]="userRecord">
    <thead>
      <tr>
        <th nzWidth="10%">No</th>
        <th nzWidth="30%">Name</th>
        <th nzWidth="10%">Age</th>
        <th nzWidth="55%">Color (Select 3)</th>
      </tr>
    </thead>
    <tbody formArrayName="Record">
      <tr *ngFor="let data of getRowControl; let i=index; let l=last" [formGroupName]="i">
        <td>{{i 1}}</td>
        <td>
          <input nz-input formControlName="name" />
        </td>
        <td>
          <input nz-input formControlName="age" />
        </td>
        <td>
          <div formArrayName="color">
            <nz-select style="width: 100%;"
            [nzMaxTagPlaceholder]="tagPlaceHolder"
            nzMode="multiple"
            nzPlaceHolder="Please select"
            [(ngModel)]="userRecord.get('Record').value[i].color" [ngModelOptions]="{standalone: true}">
              <nz-option *ngFor="let item of listOfOption" [nzLabel]="item" [nzValue]="item"></nz-option>
            </nz-select>
            <ng-template #tagPlaceHolder let-selectedList>and {{ selectedList.length }} more selected</ng-template>
          </div>
        </td>
    </tr>
    </tbody>
</nz-table>

<button nz-button nzType="primary" (click)="addNewRow()">Add New Row</button>

<button nz-button nzType="primary" (click)="onSubmit()">Submit</button>

<pre>{{userRecord.value | json}}</pre>

listOfOption: string[] = ["Red", "Orange", "Yellow", "Green", "Blue", "Purple"];
fileList: File[]=[];
userRecord: FormGroup;

ngOnInit() {
  this.userRecord = this._fb.group({
    Record: this._fb.array([this.initRows()])
  });
}

get formArr() {
  return this.userRecord.get("Record") as FormArray;
}

initRows() {
  return this._fb.group({
    name: [""],
    age: [""],
    color: this._fb.array([])
  });
}

addNewRow() {
  this.formArr.push(this.initRows());
}

get getRowControl(){
  return this.formArr.controls;
}

onSubmit(){
  console.log('Submit Button Clicked!');
  console.log('this.formArr.value: ', this.formArr.value);
}

CodePudding user response：

A form array is a list of Form Groups, what you want here is just an array of strings where the colour names are stored.

Change the colour form control to normal control with an empty value.
Add formControlName="color" directive in nz-select.

initRows() {
  return this._fb.group({
    name: [''],
    age: [''],
    color: [],
  });
}

<td>
    <nz-select formControlName="color" style="width: 100%;"
    [nzMaxTagPlaceholder]="tagPlaceHolder"
    nzMode="multiple"
    nzPlaceHolder="Please select"
    >
      <nz-option *ngFor="let item of listOfOption" [nzLabel]="item" [nzValue]="item"></nz-option>
    </nz-select>
    <ng-template #tagPlaceHolder let-selectedList>and {{ selectedList.length }} more selected</ng-template>
</td>