Flex布局在角度形式的材料中不起作用

Question

任何与包相关的问题或代码都遗漏了任何东西。下面的过程用于构建。

​

​

以下URL包含实际代码

http://angular-formly.com/#!/example/integrations/angular-material

这是写好的代码

HTML文件是-->

<form [formGroup]="form" (ngSubmit)="submit(model)">
  <formly-form [form]="form" [fields]="fields" [model]="model">
    <button type="submit" class="btn btn-default">Submit</button>
  </formly-form>
</form>

而Typescript文件是

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class AppComponent {
  form = new FormGroup({});
  model = { email: 'email@gmail.com' };
  fields = [{

    key: 'text',
    type: 'input',
    templateOptions: {
      label: 'Input'
    }
  },
  {
    elementAttributes: {
      layout: 'row',
      'layout-sm': 'column'
    },
    fieldGroup: [
      {
        key: 'firstName',
        className: 'flex',
        type: 'input',
        templateOptions: {
          label: 'First Name'
        }
      },
      {
        key: 'lastName',
        className: 'flex',
        type: 'input',
        templateOptions: {
          label: 'Last Name'
        }
      }
    ]
  },
  {
    key: 'knowsMuffinMan',
    type: 'checkbox',
    templateOptions: {
      label: 'Do you know the muffin man?'
    }

  }];

}

App.module文件导入angular-flex最新软件包

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ReactiveFormsModule} from '@angular/forms';
import {FormlyModule} from '@ngx-formly/core';
import { AppComponent } from './app.component';
import {FormlyMaterialModule} from '@ngx-formly/material';
import {FlexLayoutModule} from '@angular/flex-layout';
import {MatInputModule} from '@angular/material';
import 'hammerjs';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    FlexLayoutModule,
    FormlyModule.forRoot(),
    FormlyMaterialModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用angular5和typescript与angular-fomrly一起使用来实现这一点。像这样获得输出

​

​

Answer 1

在angular中还不能动态地应用指令，所以我发现唯一的方法就是包装表单组件以应用flex-layout，请参阅https://github.com/formly-js/ngx-formly/issues/683#issuecomment-360991370