将一个值数组设置为在Ionic2中的formcontrol

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>

例如，在这里，我需要默认情况下选择培根和蘑菇，所以我该怎么做？我应该放入什么浇头formcontrol初始化？

Answer 1

为了初始化 formControl，首先向每个选项添加 value属性，以便您可以 sideen 他们：

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

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

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]});

我使用了一个离子行，并添加了射击属性。然后添加了FormControlname属性并分配给表单控件。NGFOR在离子电池上。这最终将为您的数组中的每个项目创建一个列，我在其中添加了一个模板。在这种情况下，每个项目都有半径。

您必须将值属性分配给数组的值，以使其工作。

使无线电按钮的手动构建更简单。

为了使我的代码更加可维护，我创建了一个文件，该文件将导出以通过我的应用程序使用的数组常数。我刚刚导入了课程，并将我的属性分配给了常数。如果将新项目添加到数组中，它将通过应用程序进行反思，而不必更改多个模板。

在共享.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;

希望这会有所帮助。