Как сохранить данные в массиве форм при редактировании другого элемента управления формой в Angular

Я создаю реактивную форму для ввода сведений о пользователе с помощью Angular. Первоначально, когда все данные заполнены в этом направлении (Имя, Возраст, Цвет), все данные будут сохранены внутри реактивной формы.

Когда я начал редактировать одну из данных имени/возраста строки, ранее выбранный цвет будет стерт, а массив формы цвета будет пустым.

Как я могу сохранить цвет внутри массива форм при редактировании другого элемента управления формы?

Или есть какая-то часть, которую я делаю неправильно?

Исходные данные

После редактирования одного из данных в строке выбранные цвета исчезнут.

<div nz-row class = "mb-2">
  <div nz-col nzXs = "24" nzXl = "24">
    <div nz-row nzType = "flex" nzAlign = "middle" nzJustify = "start">
      <h3 class = "m-0">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" class = "form-control"/>
        </td>
        <td>
          <input nz-input formControlName = "age" class = "form-control"/>
        </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.info('Submit Button Clicked!');
  console.info('this.formArr.value: ', this.formArr.value);
}