ngx-formly: FlexLayout in Angular Material (elementAttributes is not effecting)

[x] bug report 

[ x ] support request

Current behavior image

Expected behavior image

Minimal reproduction of the problem with instructions

Followed this URL to build this but here it is bootstrap but am trying with material

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

# Code Html File

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

form = new FormGroup({});
 model = { email: 'email@gmail.com' };
 fields = [{
   'key': 'text',
   'type': 'input',
   className: 'flex',
   'templateOptions': {
     'label': 'Input',
   }
 },
 {
   elementAttributes: {
     layout: 'column',
     fieldGroupClassName: 'flex flex-50'
   },
   '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. file

import {ReactiveFormsModule, FormsModule} 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';

What is the motivation / use case for changing the behavior? dynamically display Side by side columns in row ,from JSON file usin flex layout

Please tell us about your environment:

  • Angular version: ^5.0.0

  • Angular Formly/Material: “^2.0.0-rc.50”

  • Browser: [all | Chrome Version 65.0.3325.181

  • Language: [all | “typescript”: “~2.4.2” | ES6/7 | ES5]

  • Node (for AoT issues): node --version = 8.9.1

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 2
  • Comments: 21 (12 by maintainers)

Most upvoted comments

@KashyakSupport add display-flex to formly-form component:

<formly-form [class.display-flex]="field.fieldGroupClassName"  ...

Actually typescript without this encapsulation: ViewEncapsulation.None, is not effecting my HTML with css