How to get ion-select multiple data and post it as array using formbuilder

Question

I am new with angular 7 and Ionic 4.

I am developing a mobile app, I am working with an API, I have to create a new company using POST, in my form I have different fields and I have one called categories, I get the list of categories to show in the view as options in ion-select using a GET request.

I need to POST selected options as array, and array elements (each category selected) have to have ID and NAME.

PS: sorry for my English.

This is my ts file:

  this.company = this.formBuilder.group({
    'name' : [null],
    'code':[null],
    'website': [null],
    'taxNumber':[null],

    'address': this.formBuilder.group({
      'country': this.formBuilder.group({
        'name': [null],
      }),
      'region': this.formBuilder.group({
        'name': [null],
      }),
      'city': this.formBuilder.group({
        'name': [null],
      }),
      'zip': this.formBuilder.group({
        'number': [null],
      }),
      'street': [null],

    }),
    'telephone': [null],
    'email': [null],
    'categories':  this.formBuilder.array([
      this.formBuilder.group({
        'id':[''],
        'name':['']
      })
    ]), 
  }); 
}

ngOnInit() {
  this.getCategories();
}

compareWithFn = (o1, o2) => {
  return o1 && o2 ? o1.id === o2.id : o1 === o2;
};

compareWith = this.compareWithFn;

async getCategories(){
  this.categoriesList=this.api.getCategories();
}

And this My HTML file:

<ion-row>

  <ion-col text-center>

    Add new company

  </ion-col>

</ion-row>

<ion-segment color="dark" [(ngModel)]="companyTab">

  <ion-segment-button value="info" checked='true'>

    General info

  </ion-segment-button>

  <ion-segment-button value="location">

    Location

  </ion-segment-button>

  <ion-segment-button value="contact">

    Contact

  </ion-segment-button>

</ion-segment>

<div [ngSwitch]="companyTab">

  <!-- General info -->

  <div *ngSwitchCase="'info'" checked > 

    <ion-item class="ion-margin-top">

      <ion-label><strong>Name: </strong></ion-label>

      <ion-input  type='Text'  placeholder='Company Name' formControlName='name' ></ion-input>

    </ion-item>


    <ion-item class="ion-margin-top">

      <ion-label><strong>Code: </strong></ion-label>

      <ion-input  type='Text'  placeholder='Code' formControlName='code' ></ion-input>

    </ion-item>


    <ion-item class="ion-margin-top">

      <ion-label><strong>Website: </strong></ion-label>

      <ion-input  type='Text'  placeholder='Website'formControlName='website' ></ion-input>

    </ion-item>

    <ion-item class="ion-margin-top">

      <ion-label><strong>Tax Number: </strong></ion-label>

      <ion-input  type='Text'  placeholder='Tax number' formControlName='taxNumber' ></ion-input>

    </ion-item>


    <div formArrayName='categories'>

      <ion-item class="ion-margin-top">

          <ion-label><strong>Category: </strong></ion-label>

        <ion-select [compareWith]="compareWith" placeholder="Categories" 
        multiple="true" > 

        <!-- formArrayName="categories" -->

        <ion-select-option *ngFor="let category of categoriesList|async;" value='{{category.name}}'>

          {{category.name}}

        </ion-select-option>

      </ion-select>

    </ion-item>

  </div>

</div>

<!-- End general info -->


<!-- Location -->

<div *ngSwitchCase="'location'" >

  <div formGroupName='address'>

    <div formGroupName='country'>
      <ion-item class="ion-margin-top">

        <ion-label><strong>Country: </strong></ion-label>

        <ion-input  type='Text'  placeholder='Country' formControlName='name' ></ion-input>

      </ion-item>

    </div>

    <div formGroupName='region'>

      <ion-item class="ion-margin-top">

        <ion-label><strong>Region: </strong></ion-label>

        <ion-input  type='Text'  placeholder='Region' formControlName='name'></ion-input>

      </ion-item>

    </div>

    <div formGroupName='city'>

      <ion-item class="ion-margin-top">

        <ion-label><strong>City: </strong></ion-label>

        <ion-input  type='Text'  placeholder='City' formControlName='name' ></ion-input>

      </ion-item>

    </div>

    <div formGroupName='zip'>

      <ion-item class="ion-margin-top">

        <ion-label><strong>Zip: </strong></ion-label>

        <ion-input  type='Text'  placeholder='Zip' formControlName='number' ></ion-input>

      </ion-item>

    </div>

    <ion-item class="ion-margin-top">

      <ion-label><strong>Street: </strong></ion-label>

      <ion-input  type='Text'  placeholder='Street' formControlName='street' ></ion-input>

    </ion-item>

  </div>

</div>

<!--End Location -->

<!-- Contact -->

<div *ngSwitchCase="'contact'">

  <ion-item class="ion-margin-top">

    <ion-label><strong>Telephone: </strong></ion-label>

    <ion-input  type='Text'  placeholder='Telephone number'  formControlName='telephone'></ion-input>

  </ion-item>

  <ion-item class="ion-margin-top">

    <ion-label><strong>Email: </strong></ion-label>

    <ion-input  type='Text'  placeholder='Email'  formControlName='email' ></ion-input>

  </ion-item>

</div>

<!-- End contact -->

Answer 1

HTML:

      <ion-select [compareWith]="compareWith" placeholder="Categories" 
        multiple="true" formControlName="categories"> 

        <ion-select-option *ngFor="let category of categoriesList|async;" [value]="category">{{category.name}}</ion-select-option>

      </ion-select>

TS:

this.company = this.formBuilder.group({
        'name' : [null],
        'code':[null],
        'website': [null],
        'taxNumber':[null],

        'address': this.formBuilder.group({
          'country': this.formBuilder.group({
            'name': [null],
          }),
          'region': this.formBuilder.group({
            'name': [null],
          }),
          'city': this.formBuilder.group({
            'name': [null],
          }),
          'zip': this.formBuilder.group({
            'number': [null],
          }),
          'street': [null],

        }),
        'telephone': [null],
        'email': [null],
        'categories': [null],

    });