ngx-formly: FlexLayout in Angular Material (elementAttributes is not effecting)
[x] bug report
[ x ] support request
Current behavior
Expected behavior
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)
@KashyakSupport add
display-flex
toformly-form
component:Actually typescript without this
encapsulation: ViewEncapsulation.None,
is not effecting my HTML with css