Question

因此，我正努力使此工作正常进行，我要做的是使用列表将反应式表单构建器属性绑定到选择选项值。这是我的用户模型：

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，并且可以正常工作

如何绑定反应形式构建器属性以进行选择

1 个答案: