html - Angular 2+ 使用 ReactiveForms 的選擇控制項

我正在我的第一個 Angular 專案中實作 reactiveforms，我無法理解為什麼 select 的值沒有被改變。對於普通文字的輸入欄位，它運作得很正常，但對於 select 欄位什麼都沒有發生。我參考了幾個教學，但無法解決。表單載入得很正常，控制台上也沒有錯誤。

my-component.html：

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

form-select.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>

dynamic-form.component.html：

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

dynamic-form.module.ts

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

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

我通過顯示我想加載代碼的結構來更改了代碼。問題是登錄模塊無法打開。這是我在問題底部例子中唯一的不同之處

記住，陣列「binding」的「name」屬性正在運作。程式碼應該按照以下範例運作：https://toddmotto.com/angular-dynamic-forms/

我注意到在範例程式碼中，列印到控制台的是一個「object」，在我的情況下，它是一個 DynamicFormComponent。

答案＃1

當從 Materialize 中移除該類別後問題得到解決，在解決問題後，我去找其他有相同問題的人，並跟隨可能的解決方案的連結：

或者直接套用這個類別

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

在輸入標籤中。