Question

任何包裹问题或相关代码遗漏了任何内容。以下过程用于构建。

以下网址是实际代码

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

这是代码

HTML文件是 - ＆gt;

<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，因此我找到的唯一方法是包装formly-form组件以应用flex-layout，请参阅https://github.com/formly-js/ngx-formly/issues/683#issuecomment-360991370

Flex布局不适用于角形材质

1 个答案: