set an array of values to formControl in ionic2

Question

ion-select with multiple choices using reactive form so I need to set a formControl with many values to be selected as default :

FormA:FormGroup;

this.FormA = this.formBuilder.group({
      toppings:['',validators.required]
    });

<form [formGroup]="FormA">
  <ion-item>
     <ion-label>Toppings</ion-label>
     <ion-select multiple="true" formControlName="toppings">
       <ion-option>Bacon</ion-option>
       <ion-option>Black Olives</ion-option>
       <ion-option>Extra Cheese</ion-option>
       <ion-option>Mushrooms</ion-option>
     </ion-select>
  </ion-item>
</form>

for example here i need Bacon and Mushrooms to be selected by default so how can i do it ? what should i put in the toppings formControl initializations?

What happens if add a value attribute to the options like this <ion-option value="option1">Option 1</ion-option> <ion-option value="option2">Option 2</ion-option> and then you initialize it using those values like this?: toppings:[['option1', 'option2'], validators.required] — sebaferreras
– sebaferreras, Commented Dec 19, 2017 at 13:08
it works, thank you i get an idea how to facilitate the complex object that i have — Joe Sleiman
– Joe Sleiman, Commented Dec 19, 2017 at 13:37
Glad to hear that! If it's ok for you, I'll add that as an answer so we can close this issue :) — sebaferreras
– sebaferreras, Commented Dec 19, 2017 at 13:46

sebaferreras · Accepted Answer · 2017-12-19 13:51:54Z

1

In order to initialize the formControl, first add a value attribute to each option so you can identify them:

<form [formGroup]="FormA">
  <ion-item>
     <ion-label>Toppings</ion-label>
     <ion-select multiple="true" formControlName="toppings">
       <ion-option value="bacon">Bacon</ion-option>
       <ion-option value="black-olives">Black Olives</ion-option>
       <ion-option value="extra-cheese">Extra Cheese</ion-option>
       <ion-option value="mushrooms">Mushrooms</ion-option>
     </ion-select>
  </ion-item>
</form>

And then initialize the control to an Array of strings, using the same strings of the value attribute:

FormA:FormGroup;

this.FormA = this.formBuilder.group({
  toppings:[['bacon', 'black-olives'],validators.required]
});

answered Dec 19, 2017 at 13:51

sebaferreras

44.7k11 gold badges120 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

De Wet Ellis · Accepted Answer · 2018-03-29 05:06:42Z

You can also easily create a list of Radiobuttons using a ngFor to loop through an array list. This was my solution

on the HTML template

 <ion-row radio-group formControlName="toppings">

  <ion-col *ngFor="let topping of toppings" col-auto>
    <ion-item>
      <ion-radio item-left value="{{topping}}"></ion-radio>
      <ion-label>{{topping}}</ion-label>
    </ion-item>
  </ion-col>
</ion-row>

In your component

toppings: ['bacon', 'black-olives'];
FormA:FormGroup; 

this.FormA = this.formBuilder.group(
{  toppings:[''],Validators.required]});

I used an ion-row and added the radio-group attribute. Then added the formControlName property and assigned to the Form Control. The ngFor is on the ion-col. This will end up creating a column for each item in your array and I added a template within that. In this case a RadioButton for each item.

You must assign the value property to the value of your array in order for this to work.

Makes the manual building of the Radio buttons a bit simpler.

To make my code more maintainable I created a file that exports constants of arrays to use through out my application. I just imported the class and assigned my property to the constant. If a new item is added to the array it will reflect through out the application instead of having to change multiple templates.

Ex in a shared .ts file:

export const Toppings = ['bacon', 'cheese' , 'olives'];
export const Base = ['Thick', 'Thin' , 'Gluten Free'];

In your component

import { Toppings , Base } from 'location/of/your/file

//Use "=" not ":" because you are assigning a constant Array and not creating a type of
toppings = Toppings;
base = Base;

Hope this helps.

Collectives™ on Stack Overflow

set an array of values to formControl in ionic2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related