Как сохранить данные при наличии поля в форме на angular

Question

HTML

<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <nz-form-item *ngFor="let control of controlArray; let i = index">
       <nz-form-label *ngIf="i == 0" [nzFor]="control.controlInstance">
          <span translate>SBU(s)</span>
        </nz-form-label>
        <nz-form-control [nzXs]="24">
          <div nz-row nzGutter="8">
            <div nz-col nzSpan="11">
              <nz-select formControlName="sbus" name="controlInstance" [attr.id]="control.id"
                [nzPlaceHolder]="'Select SBU(s)'">
                <nz-option *ngFor="let item of sbus$ | async" [nzLabel]="item.description" [nzValue]="item.id">
                </nz-option>
              </nz-select>
            </div>
            <div nz-col nzSpan="11">
              <nz-select formControlName="role" name="role" nzPlaceHolder="">
                <nz-option *ngFor="let item of roles" [nzLabel]="item" [nzValue]="item"></nz-option>
              </nz-select>
            </div>
            <div nz-col nzSpan="2">
              <i nz-icon nzType="minus-circle-o" class="dynamic-delete-button"
                (click)="removeField(control, $event)"></i>
            </div>
          </div>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 20, offset: 4 }">
          <button nz-button nzType="dashed" style="width:60%" (click)="addField($event)">
            <i nz-icon type="plus"></i> Add field
          </button>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 20, offset: 4 }">
          <button nz-button nzType="primary">Submit</button>
        </nz-form-control>
      </nz-form-item>
    </form>

TS

validateForm: FormGroup;
  controlArray: Array<{ id: number; controlInstance: string }> = [];

  sbus$ = new BehaviorSubject([]);

  rooms = [{
    "id": "1ueI",
    "sbu": "Room 1"
  }, {
    "id": "iqwu28",
    "sbu": "Room 2"
  }, {
    "id": "1938qwe",
    "sbu": "Room 3"
  }];

  roles = ['ROLE_ADMIN', 'ROLE_USER'];

  addField(e?: MouseEvent): void {
    if (e) {
      e.preventDefault();
    }
    const id = this.controlArray.length > 0 ? this.controlArray[this.controlArray.length - 1].id + 1 : 0;

    const control = {
      id,
      controlInstance: `sbus${id}`
    };
    const index = this.controlArray.push(control);
    console.log(this.controlArray[this.controlArray.length - 1]);
    this.validateForm.addControl(
      this.controlArray[index - 1].controlInstance,
      new FormControl(null, Validators.required)
    );
  }

  removeField(i: { id: number; controlInstance: string }, e: MouseEvent): void {
    e.preventDefault();
    if (this.controlArray.length > 1) {
      const index = this.controlArray.indexOf(i);
      this.controlArray.splice(index, 1);
      console.log(this.controlArray);
      this.validateForm.removeControl(i.controlInstance);
    }
  }

  getFormControl(name: string): AbstractControl {
    return this.validateForm.controls[name];
  }

  submitForm(): void {
    for (const i in this.validateForm.controls) {
      this.validateForm.controls[i].markAsDirty();
      this.validateForm.controls[i].updateValueAndValidity();
    }
    console.log(this.validateForm.value);
  }

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.sbus$.next(this.rooms);
    this.validateForm = this.fb.group({});
    this.addField();
  }

Как чтобы сохранить данные следующим образом:

sbus: [{
   id: '1ueI',
   sbu: 'Room1',
   role: 'ROLE_USER'
},{
   id: '1938qwe',
   sbu: 'Room3',
   role: 'ROLE_ADMIN'
}]

Моя проблема, когда я пытаюсь сохранить данные, вывод выглядит так: {sbus0: null, sbus1: null} он не соответствует моей полезной нагрузке. вместо этого это будет выглядеть так:

   sbus: [{
       id: '1ueI',
       sbu: 'Room1',
       role: 'ROLE_USER'
    },{
       id: '1938qwe',
       sbu: 'Room3',
       role: 'ROLE_ADMIN'
    }]

или примерно так:

{sbu:<id>, role:<role>}

вот пример: https://stackblitz.com/edit/angular-phzxkq?file=src / app / app.component.ts

Имеет поле добавления, его можно умножить. но если он достиг длины комнаты, он не должен удалять кнопку добавления поля.