Как сбросить поле при добавлении нового поля в angular с помощью zorro

Question

Ниже приведены файлы html и ts, которые я использую

HTML

 <nz-form-item *ngFor="let control of listOfControl; 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)' | translate">
                        <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>
                  <button nz-button nzType="dashed" class="add-button" (click)="addField($event)">
                    <i nz-icon nzType="plus"></i>
                    Add field
                  </button>
                </nz-form-control>
              </nz-form-item>

TS

@Select(UserPageState.get('sbus')) sbus$: Observable<Group>;
roles = ['ROLE_ADMIN', 'ROLE_USER'];

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

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

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

В моей форме есть поле, в которое я могу добавить новый элемент: в роли, выбранной по умолчанию, указано ROLE_ADMIN. затем, когда я выбираю из sbu / room `` Room 1 and change the role to ROLE_USER then when I click the add field it will instead it will reset to Выберите SBU (s) and the role should reset to ROLE_ADMIN``` ..

Это вывод, который я получаю:

Но мой желаемый результат должен быть таким: