如何使用 formbuilder 获取 ion-select 多个数据并将其 post 作为数组

Question

我是 angular 7 和 Ionic 4 的新手。

我正在开发一个移动应用程序，我正在使用 API，我必须使用 POST 创建一个新公司，在我的表格中我有不同的字段，我有一个叫做类别，我使用 GET 请求获得要在视图中显示为 ion-select 中的选项的类别列表。

我需要 POST selected 选项作为数组，数组元素（每个类别 selected）必须有 ID 和 NAME。

PS: 对不起我的英语。

这是我的 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':  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();
}

还有这个我的 HTML 文件：

<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

切换到使用整个类别对象作为值。

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

Answer 2

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],

    });

如何使用 formbuilder 获取 ion-select 多个数据并将其 post 作为数组

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

angular

formarray

formgroups

ionic4

ion-select