如何将反应式表单生成器属性绑定到 select

Question

所以我正在努力让它工作，我想做的是使用列表将反应式表单构建器属性绑定到 select 选项值。这是我的用户模型：

export interface User {
  id: number;
  firstName: string;
  lastName: string;
  about: string;
  features: IFeatureList[];
}

export interface IFeatureList {
  FeatureId: string;
  FeatureName: string;
}

TS文件绑定：

this.form = this.formBuilder.group({
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  about: [],
  features: this.formBuilder.array([ this.createItem() ])
});

  createItem(): FormGroup {
  return this.formBuilder.group({
    FeatureId: '',
    FeatureName: ''
  });
}

我什至需要使用 formBuilder.array 添加组吗？

模板：

<select class="form-control" formArrayName="features">
<option *ngFor="let item of form.get('features').controls; let i = index;" 
[value]="item.FeatureId">
  <div [formGroupName]="i">
    {{item.FeatureName}}
  </div>
  </option>

我也不确定这里的 form.get('features').controls，我需要只使用一个简单的 ngFor 吗？

示例 - https://stackblitz.com/edit/angular-ndj21m?file=src%2Fapp%2Fapp.module.ts

我在 .ts 文件中尝试过的内容：

this.form = this.formBuilder.group({
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  about: [],
  features: []
});

模板文件：

<select class="form-control" formControlName="features">
<option *ngFor="let item of user" 
[value]="item.FeatureId">
    {{item.FeatureName}}
  </option>

Answer 1

您正在访问根对象而不是数组。

<select class="form-control" formControlName="features">
    <option *ngFor="let item of (user|async).features" 
    [value]="item.FeatureId">
        {{item.FeatureName}}
      </option>
  </select>

我修改了 ngFor，它正在工作

如何将反应式表单生成器属性绑定到 select

How to bind reactive form builder properties to select

angular

angular-reactive-forms