html - 带有选择控件的 Angular 2+ ReactiveForms

Question

我在我的第一个 Angular 项目中实现 react 形式，我无法弄清楚为什么选择的值没有被改变。对于普通文本的输入字段，它安静地工作，对于选择字段，什么也没有发生。我跟着几个教程，无法解决。表单加载完美，在控制台上没有错误。

我的组件.html:

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

表单选择.component.html:

<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>

动态表单.component.html:

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

动态表单.module.ts

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [
    DynamicFieldDirective,
    DynamicFormComponent,
    FormButtonComponent,
    FormInputComponent,
    FormSelectComponent
  ],
  exports: [
    DynamicFormComponent
  ],
  entryComponents: [
    FormButtonComponent,
    FormInputComponent,
    FormSelectComponent
  ]

登录.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);
  }
}

编辑:

登录模块:

@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 { }

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

请记住，对于数组的“名称”属性，“绑定(bind)”是有效的。该代码应根据以下示例工作: https://toddmotto.com/angular-dynamic-forms/

I noticed that in the example code what is printed on the console, it is an "object", in my case it is a DynamicFormComponent.

Answer 1

从 Materialise 中删除类时问题已解决，问题解决后其他人遇到了同样的问题，请点击可能解决方案的链接:

或者只是申请类(class)

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

在输入标签中。