Question

我在第一个角度项目中实现了反应变形，我无法弄清楚为什么选择的值没有被改变。对于普通文本的输入字段，它可以安静地工作，因为选择字段没有任何反应。我按照几个教程，无法解决。表单加载完美且控制台上没有错误。

MY-component.html：

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

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

动态form.component.html：

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

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

app模块：

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

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

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

记住＆＃34;名称＆＃34;数组的属性＆＃34;绑定＆＃34;工作中。代码应该按照以下示例工作： https://toddmotto.com/angular-dynamic-forms/

我注意到在示例代码中，控制台上打印了什么是一个＆＃34;对象＆＃34;，在我的例子中它是一个DynamicFormComponent。

Answer 1

从Materialise中删除类时解决了问题，在将问题转移到其他遇到相同问题的人之后，请按照可能的解决方案的链接进行：

或者只是应用课程

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

在输入标记中。

具有选择控件的Angular 2+ ReactiveForms

1 个答案: