反应形式的垫选择列表答案

【问题标题】：mat-selection-list in reactive form反应形式的垫选择列表
【发布时间】：2018-03-21 16:00:38
【问题描述】：

有没有人成功地将mat-selection-list 与 Angular 的响应式表单一起使用。当我尝试使用它时，我得到了

values.map 不是函数

下面是我的html代码：

<div class="form-group" [formGroup]="activityForm">
      <mat-selection-list formControlName="activity" (selectionChange)="onActivitySelected($event)">
        <mat-list-option *ngFor="let act of activities"
                         [value]="act.id">
          {{act.name}}
        </mat-list-option>
      </mat-selection-list>
</div>

这是我的表单定义：

this.formGroup1 = this.fb.group({
      destinationForm: this.fb.group({
        destination: [null, Validators.required]
      }),
      activityForm: this.fb.group({
        activity: [[''], Validators.required]
      }),
      travellerForm: this.fb.group({
        firstName: ['', Validators.required],
        lastName: '',
      })
});

有人可以帮忙解决这个问题吗

堆栈跟踪：

【问题讨论】：

你是如何定义values的？错误来自哪里（堆栈跟踪）？
您能否为此创建一个演示，不使用嵌套组件这似乎工作正常，所以似乎有一些子组件的问题。
在这种情况下，值来自于材料，是选项的迭代器。

标签： angular angular-material reactive-forms

【解决方案1】：

this.formGroup1 = this.fb.group({
      destinationForm: this.fb.group({
        destination: [{value: null, disabled: false}, [Validators.required]]
      }),
      activityForm: this.fb.group({
        activity: [{value: '', disabled: false}, [Validators.required]]
      }),
      travellerForm: this.fb.group({
        firstName: [{value: '', disabled: false}, [Validators.required]]
        lastName: [{value: '', disabled: false}]
      })
});

【讨论】：