Question

我的应用程序允许用户从事件下拉列表中进行选择，每个事件都有自己唯一的一组属性和可以选择的属性值。

这表示为事件的FormGroup，其中包含事件的每个属性的FormControl。初始化时，FormGroup将使用默认事件的属性进行填充，并且当选择新事件时，FormGroup将删除所有旧的FormControl，然后使用新事件的属性FormControls填充它。我这样做是为了能够重置事件属性选择下拉列表并在事件更改时设置其默认值。

例如，事件1具有属性“prop1”和“prop2”，事件2具有属性“prop3”，“prop4”和“prop5”。当页面加载时，选择事件1并显示两个选择下拉列表，一个用于prop1，一个用于prop2，每个都有自己的一组值。当用户选择事件2时，现有的选择下拉列表将被删除，而对于prop3，prop4和prop5，它们将取代三个新的下拉列表。

刷新事件属性下拉列表无需使用FormBuilder，FormGroup和FormControl。问题是当多个事件具有相同名称的属性时，属性下拉列表与基础数据不同步（在事件选择时重置），属性下拉列表保持旧的用户选择值而不是重置。 / p>

当我尝试使用FormBuilder等时会抛出此错误：

错误：没有名称为'prop1'
的表单控件的值访问器

的 app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...

@NgModule({
  ...
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule
  ],

的 app.component.ts

import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
...

@Component({
  ...
})
export class AppComponent implements OnInit {
  ...
  propertiesFormGroup: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.propertiesFormGroup = this.fb.group({});
    ...
    for (let p in this.propertiesDefinitions) {
      pValues = [...];
      this.propertiesFormGroup.addControl(p, new FormControl(pValues[0]));

的 app.component.html

<div id="property-container" [formGroup]="propertiesFormGroup">
  ...
  <ul id="event-properties">
    <li *ngFor="let p of properties">
      <select ...>
        <option *ngFor="let v of pValues" [formControlName]="p">{{ v }}</option>

到目前为止我找到的答案在模板中使用静态formControlName值，这在这里不起作用。我的动态formControlName模板引用似乎工作，因为错误消息包含正确的属性名称（“prop1”）。我试图避免使用ngModel作为数据模型和表单模型确实有所不同。我该如何解决这个问题？

Answer 1

您必须将[formControlName]放入<select>：

<select [formControlName]="myCtrl"...>

Angular 4 FormBuilder，FormGroup，带有动态FormControls

1 个答案: