CODEWITHSUNDEEP
angularangular-materialangular-formly
chandu
chandu

Reputation: 2276

Arrange two input boxes side by side using angular-formly and Angular 5 with Material Design

I am working on Angular formly with Angular Material. My question is how to arrange two input boxes side by side without writing any external CSS? With AngularJS we have an option to arrange the layout like so. But I didn't figure out how to do that with Angular.

Upvotes: 0

Views: 2711

Answers (1)

chandu
chandu

Reputation: 2276

I Have achieved this with the below json format:

orderFields: FormlyFieldConfig[] = [
    {
        fieldGroupClassName: 'flex-container',
        fieldGroup: [
            {
                className: 'mat-form-field',
                type: 'input',
                key: 'firstName',
                templateOptions: {
                  label: 'First Name',
                }
            },
            {
                className: 'mat-form-field ',
                type: 'input',
                key: 'lastName',
                templateOptions: {
                  label: 'Last Name',
                }

            },
            {
              className: 'mat-form-field',
              type: 'input',
              key: 'lastName',
              templateOptions: {
                label: 'Last Name',
              }
        }]
  }
];

Here the class 'mat-form-field' is the key to arrange the inputs side by side.

Upvotes: 3

Related Questions