Html 带选择控件的角度2+反应窗体

我在我的第一个Angle项目中实现了reactiveforms，我不明白为什么select的值没有被更改。对于普通文本的输入字段，它会安静地工作，而对于select字段，则不会发生任何事情。我听了好几篇教程，都没能解答。窗体可以完美地加载，并且在控制台上没有错误

my-component.html：

<dynamic-form [config]="config" #form="dynamic-Form" (submit)="realizarLogin(form)">
    </dynamic-form>
    {{ form.valid }} {{ form.value | json }}

<div class="dynamic-field form-select" [formGroup]="group">
  <label>{{ config.label }}</label>
  <select [formControlName]="config.name">
        <option value="">{{ config.placeholder }}</option>
        <option *ngFor="let option of config.options">
          {{ option }}
        </option>
      </select>
</div>

<form class="dynamic-form" [formGroup]="form">
  <ng-container *ngFor="let field of config;" dynamicField [config]="field" [group]="form">
  </ng-container>
</form>

login.component.ts：

export class LoginComponent implements AfterViewInit {
  @ViewChild(DynamicFormComponent) form: DynamicFormComponent;

  config: FieldConfig[] = [
    {
      type: 'input',
      label: 'Full name',
      name: 'name',
      placeholder: 'Enter your name',
      validation: [Validators.required, Validators.minLength(4)]
    },
    {
      type: 'select',
      label: 'Favourite Food',
      name: 'food',
      options: ['Pizza', 'Hot Dogs', 'Knakworstje', 'Coffee'],
      placeholder: 'Select an option',
      validation: [Validators.required]
    },
    {
      label: 'Submit',
      name: 'submit',
      type: 'button',
    }
  ];

  ngAfterViewInit() {
    let previousValid = this.form.valid;
    this.form.changes.subscribe(() => {
      if (this.form.valid !== previousValid) {
        previousValid = this.form.valid;
        this.form.setDisabled('submit', !previousValid);
      }
    });

    this.form.setDisabled('submit', true);
    this.form.setValue('name', 'Todd Motto');
  }

  submit(value: {[name: string]: any}) {
    console.log(value);
  }
}

编辑：

login.module：

@NgModule({
  imports: [
    CommonModule,
    LoginRoutingModule,
    DynamicFormModule
  ],
  declarations: [LoginComponent]
})
export class LoginModule {}

应用程序模块：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

    RetaguardaModule,
    LoginModule,
    AppRoutingModule
  ],
  providers: [
    LoginGuard,
    LoginService,
    Ambiente
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我通过显示要加载代码的结构来更改代码。问题是登录模块中没有打开。这是与我在问题页脚中给出的示例的唯一区别

记住数组绑定的name属性正在工作。代码应根据以下示例工作：

我注意到在控制台上打印的示例代码中 是一个对象，在我的例子中，它是一个动态组件

---

将类从Materialize中移除时解决的问题，在解决该问题后，将该问题转移到具有相同问题的其他人身上，请遵循可能解决方案的链接：

或者直接申请课程

<select [formControlName]="config.name" class="browser-default">

---

在输入标记中。

是否要创建plunker？我不知道如何做。您的代码正在运行，但我在代码中找不到问题@yurzui@yurzui我通过显示要加载代码的结构来更改代码。

<select [formControlName]="config.name" class="browser-default">