Angular reactive form + nebular - How to set default value of dropdown list

Question

I have a problem with setting default value in dropdown list which is a reactive form. Except reactive form I'm using nebular for your information. I got this code after one of my colleagues which one did not finish his job. Now is my turn.

I tried alot of things to set this default value in list and I can't figure it out.

Before action with choosing from dropdown list, is import file csv/exel with x columns and y rows. This is importnat becouse knowledge of quantity of columns and rows is needed to create dynamic form. After that I will create form and I want to have default value "dontMap - Nie importuj" on start.

Could you help me figure it out my problem?

Belowe you will find part of code from TS and HTML code.

HTML

    
 <nb-step [label]="labelTwo">
        <ng-template #labelTwo>Mapuj kolumny</ng-template>
        <div>
          <div *ngIf="true">
            <hr class="whiteStripe">
            <form [formGroup]="dynamicForm" *ngIf="dynamicForm">
              <div class="align-self-center">
                <div *ngFor="let a of t.controls; let i=index">
                  <div [formGroup]="a">
                    <div class="  row justify-content-center">
                      <div class="col-md-2">
                        <b>{{result[0][i]}}</b>
                      </div>
                      <div class="col-md-2">
                        <div>
                          {{result[1][i]}}
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div>
                          <nb-select  fullWidth id="{{index}}" (selectedChange)="selectItemsInMapping($event)" 
                             formControlName="option" required >
                            <nb-option [value]="{property:'dontMap', number:i}" >**Nie importuj**</nb-option>
                            <nb-option [value]="{property:'ref', number:i}" [disabled]="isDisabled('ref')">Ref</nb-option>
                            <nb-option [value]="{property:'idAtWarehouse', number:i}" [disabled]="isDisabled('idAtWarehouse')">IdAtWarehouse</nb-option>
                            <nb-option [value]="{property:'multiplicity', number:i}"  [disabled]="isDisabled('multiplicity')">Krotność</nb-option>
                            <nb-option [value]="{property:'gtu', number:i}" [disabled]="isDisabled('gtu')">GTU</nb-option>
                            <nb-option [value]="{property:'length', number:i}" [disabled]="isDisabled('length')">Długość</nb-option>
                            <nb-option [value]="{property:'width', number:i}" [disabled]="isDisabled('width')">Szerokość</nb-option>
                            <nb-option [value]="{property:'height', number:i}" [disabled]="isDisabled('height')">Wysokość</nb-option>
                            <nb-option [value]="{property:'weight', number:i}" [disabled]="isDisabled('weight')">Waga</nb-option> 
                          </nb-select>
                        </div>
                      </div>
                    </div>
                  </div>
                  <br>
                  <hr>
                </div>
              </div>
            </form>
          </div>
        </div>
     <div class="row col">
          <button class="col-md-5" nbButton nbStepperPrevious>
            <nb-icon icon="arrow-back-outline"></nb-icon>
            Cofnij
          </button>
          <button class="col-md-5 offset-md-2" nbButton nbStepperNext [disabled]="!dynamicForm.valid" (click)="submitConfig()">Mapuj
            kolumny<nb-icon icon="arrow-forward-outline"></nb-icon></button>
        </div>
      </nb-step>

TS

@Component({
  selector: 'ngx-import-complementary-files',
  templateUrl: './import-complementary-files.component.html',
  styleUrls: ['./import-complementary-files.component.scss']
})
export class ImportComplementaryFilesComponent implements OnInit {
  loadingPapaFile: boolean = false;
  result = [];
  fileToUpload: File;
  nameOfFile: string;
  btnDisabled = false;
  selectModel: string;
  objectList: FileAd[] = [];
  config: ConfigImport = new ConfigImport();
  firstStep: boolean = false;
  hasHeader: boolean = false;
  delimiterr: string = ';';
  configForm: FormGroup;
  beforeImportForm: FormGroup;
  preselectedMap: any = {
    property: 'dontMap',
    number: 0
  }
  dynamicForm: FormGroup;
  warehouseList: ImportConfigResponseModel[] = [];
  filteredOptions$: Observable<ImportConfigResponseModel[]>;
  warehouseId: string;
  canUpload: boolean = false;
  recordsForDb: RecordsToUpdateProduct = new RecordsToUpdateProduct();
  output: FileAd[] = [];
  fileSended: boolean = false;
  currentChunk: number = 0;
  totalChunks: number = 0;
  progressBar: number = 1;

  fileList: any[] = [];

  constructor(
    private toastrService: NbToastrService,
    private router: Router,
    public service: ImportGnuService,
    private formBuilder: FormBuilder,
    private importConfigService: ImportConfigService,
    private productUpdateService: ProductsUpdateService
  ) { }

  ngOnInit(): void {
    this.firstStep = false;
    this.importConfigService.getImports().subscribe((x) => {
      this.warehouseList = x;
      this.filteredOptions$ = of(this.warehouseList);
    })
    this.beforeImportForm = this.formBuilder.group({
      hasHeader: [false, Validators.required],
      delimiter: ['']
    })

    this.configForm = this.formBuilder.group({
      item: ['', Validators.required],
    });
    this.dynamicForm = this.formBuilder.group({
      columns: new FormArray([]),
    });
  }


  get f() { return this.dynamicForm.controls; }
  get t() { return this.f.columns as FormArray; }

  createDynamicColumnsForMapping(results: any) {
    this.firstStep = true;
    this.loadingPapaFile = false;
    this.result.length = 0;
    this.result = results.data;
    let firstItem = this.result[0];
    let number = firstItem.length;
    const numberOfColumns = number;
    if (this.t.length < numberOfColumns) {
      for (let i = this.t.length; i < numberOfColumns; i++) {
        this.t.push(this.formBuilder.group({
          option: [null, Validators.required], 

        }));
      }
    } else {
      for (let i = this.t.length; i >= numberOfColumns; i--) {
        this.t.removeAt(i);
      }
    }

    for (let i = 0; i < this.t.length; i++) {
      this.t.controls[i].setValue({ option: { property: 'dontMap', number: i } })
      this.t.controls[i].updateValueAndValidity({ emitEvent: true })
    }

    console.log(this.t.controls);
  }

  
  async importFile(files) {
    this.firstStep = false;
    this.loadingPapaFile = true;
    this.dynamicForm.reset();
    this.t.clear();
    this.fileToUpload = undefined;
    if (this.beforeImportForm.invalid) {
      return;
    } else {
      this.delimiterr = this.beforeImportForm.get('delimiter').value;
    }
    if (files.lenght === 0) return;
    this.fileToUpload = <File>files[0];

    const papaPromise = (fileToUpload) => new Promise((resolve, reject) => {
      Papa.parse(fileToUpload, {
        delimiter: this.delimiterr,
        complete: function (results) {
          resolve(results);
        },
        error: function (error) {
          reject(error);
        }
      });
    });
    let results = undefined;
    results = await papaPromise(this.fileToUpload);
    this.createDynamicColumnsForMapping(results);
;

  }



  selectItemsInMapping(p: any) {
    this.objectList.length = 0;

    var index = this.fileList.findIndex(x => x.number == p.number)

    if (index > -1) {
      this.fileList.splice(index, 1)
    }
    this.fileList.push(p);

    if (p.property == 'ref') {
      this.config.ref = p.number;
    }
    if (p.property == 'idAtWarehouse') {
      this.config.idAtWarehouse = p.number;
    }
    if (p.property == 'multiplicity') {
      this.config.multiplicity = p.number;
    }
    if (p.property == 'gtu') {
      this.config.gtu = p.number;
    }
    if (p.property == 'length') {
      this.config.length = p.number;
    }
    if (p.property == 'width') {
      this.config.width = p.number;
    }
    if (p.property == 'height') {
      this.config.height = p.number;
    }
    if (p.property == 'weight') {
      this.config.weight = p.number;
    }
    if (p.property == 'dontMap') {
      if (this.config.gtu == p.number) {
        this.config.gtu = null;
      }
      if (this.config.multiplicity == p.number) {
        this.config.multiplicity = null;
      }
      if (this.config.ref == p.number) {
        this.config.ref = null;
      }
      if (this.config.idAtWarehouse == p.number) {
        this.config.idAtWarehouse = null;
      }
      if (this.config.length == p.number) {
        this.config.length = null;
      }
      if (this.config.weight == p.number) {
        this.config.weight = null;
      }
      if (this.config.width == p.number) {
        this.config.width = null;
      }
      if (this.config.height == p.number) {
        this.config.height = null;
      }
    }
  }