Как получить ion-select несколько данных и разместить их в виде массива, используя formbuilder - PullRequest
Новая
       28

Как получить ion-select несколько данных и разместить их в виде массива, используя formbuilder

0 голосов
/ 23 апреля 2019

Я новичок с угловой 7 и ионной 4.

Я занимаюсь разработкой мобильного приложения, я работаю с API, мне нужно создать новую компанию, используя POST, в моей форме у меня есть разные поля, и у меня есть одно, называемое категориями, я получаю список категорий для отображения в просмотр как опции в ion-select с использованием запроса GET.

Мне нужно POST выбранные параметры в качестве массива, а элементы массива (каждая выбранная категория) должны иметь ID и ИМЯ.

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

Ответы [ 2 ]

0 голосов
/ 25 апреля 2019

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

    });
0 голосов
/ 23 апреля 2019

Переключиться на использование целого объекта категории в качестве значения. 

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