Question

使用反应形式进行多项选择的离子选择，因此我需要设置一个具有多个值的formControl作为默认值：

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>

例如，我需要默认选择培根和蘑菇，所以我该怎么做？我应该在toppings formControl初始化中添加什么？

Answer 1

要初始化formControl，请先为每个选项添加value属性，以便识别：

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

然后使用Array属性的相同字符串将控件初始化为value个字符串：

FormA:FormGroup;

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

Answer 2

您还可以使用ngFor轻松创建Radiobuttons列表，以循环遍历数组列表。这是我的解决方案

HTML模板上的

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

在您的组件中

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

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

我使用了离子行并添加了radio-group属性。然后添加formControlName属性并分配给Form Control。 ngFor在ion-col上。这将最终为数组中的每个项创建一个列，并在其中添加了一个模板。在这种情况下，每个项目都有一个RadioButton。

您必须将value属性赋值给数组的值才能使其生效。

使单选按钮的手动构建更简单一些。

为了使我的代码更易于维护，我创建了一个文件，用于导出数组的常量，以便在我的应用程序中使用。我刚刚导入了类并将我的属性分配给常量。如果将新项添加到数组中，它将反映出应用程序而不必更改多个模板。

Ex在共享的.ts文件中：

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

在您的组件中

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;

希望这有帮助。

在ionic2

2 个答案: