FormArray没有FormControls,只是字符串Angular 2

Question

我的后端有两个字符串数组,我必须用一个字符串或多个字符串填充.但它们不是关键值对.我试图将一个字符串推入其中一个数组,但遇到的事实是我没有,也无法指定一个控件:值对.

我的formArray看起来像

collections: new FormArray([]),

我的html选择字符串

              <md-select placeholder="Collection">
            <md-option (click)="addCollectionId('one')" value="Local">Local</md-option>
            <md-option (click)="addCollectionId('two')" value="Music">Music</md-option>
            <md-option (click)="addCollectionId('three')" value="Performing Arts">Performing Arts</md-option>
            <md-option (click)="addCollectionId('four')" value="Sports">Sports</md-option>
            <md-option (click)="addCollectionId('five')" value="Restaurants">Restaurants</md-option>
          </md-select>

我将字符串添加到formArray的逻辑如下:

  addCollectionId(id: string) {
const control = <FormArray>this.createCardForm.controls['collections'];
control.push(id);

}

我收到错误'类型'字符串的参数'不能分配给'AbstractControl'类型的参数.

因为我无法推送一个控件:值对而只有字符串/字符串如何在保持整体形式的同时将字符串推送到数组？

任何帮助/提示/建议将不胜感激.

Answer 1

您可以使用Reactive Forms API来实现此目的,我也建议使用angular formBuilder:

export class SelectOverviewExample {
  createCardForm: FormGroup;

  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  // inject form builder
  constructor(private fb: FormBuilder) {
    // add collections form array to your form
    this.createCardForm = this.fb.group({
      collections: this.fb.array([]),
    });
  }

  // function which pushed new value to collections array
  addCollectionId(val) {
    const collections = this.createCardForm.get('collections');
    // add only once
    if (!collections.value.includes(val)) {
      collections.push(this.fb.control(val));
    }
  }
}

这样,所有选定的值都将添加到表单中,并在createCardForm.value.collections阵列下可用.

这是HTML:

<md-select placeholder="Favorite food">
  <md-option [disabled]="createCardForm.value.collections.includes(food.value)" 
             *ngFor="let food of foods" 
             [value]="food.value" 
             (click)="addCollectionId(food.value)">
    {{ food.viewValue }}
  </md-option>
</md-select>

<pre>{{ createCardForm.value | json }}</pre>

这里是更新的plunker分叉来自https://material.angular.io/components/select/overview

UPDATE

这里只是反应形式的解决方案,没有调用addCollectionId()功能.将reactiveCollections字段添加到表单组:

constructor(private fb: FormBuilder) {
  this.createCardForm = this.fb.group({
    collections: this.fb.array([]),
    reactiveCollections: null
  });
}

将表单组和控件名称添加到md-select:

<form [formGroup]="createCardForm">
  <md-select placeholder="Favorite food" 
             multiple="true" 
             formControlName="reactiveCollections">
    <md-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </md-option>
  </md-select>
</form>

Plunker也会更新