Dynamic Angular Forms: How to Set Input Width Dynamically for Each Control

Question

I don't know if this is possible but i have built a dynamic form component which works quite well and i can control a number of items through a configuration file.

One item i have not been able to control is the width of the input field, I have tried a dozen ways but none seem to work. i.e setting width in the component when creating the form control etc

Does anyone know if what i am trying to do is actually possible and can point me in the right direction.

Template Code

<div fxLayout="row">
    <div [formGroup]="formGroup" fxLayoutAlign="start" fxLayoutGap="10px">
        <div *ngFor="let form_elem of formTemplate">
            <div *ngIf="form_elem.visible === 'true'">
                <mat-form-field>
                    <mat-label>{{ form_elem.label }}</mat-label>
                    <input
                        matInput
                        type="text"
                        formControlName="{{ form_elem.name }}"
                        class="{{ form_elem.width }} "
                    />
                </mat-form-field>
            </div>
        </div>
    </div>
</div>

Typescript Code

import {
    ChangeDetectionStrategy,
    Component,
    EventEmitter,
    Input,
    Output
} from "@angular/core";
import { FormGroup, FormControl } from "@angular/forms";

@Component({
    selector: "fw-form-array-item",
    templateUrl: "./form-array-item.component.html",
    styleUrls: ["./form-array-item.component.scss"],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class FormArrayItemComponent {
    @Output() remove = new EventEmitter<FormGroup>();
    @Input() formGroup: FormGroup;
    @Input() formTemplate: any;

    constructor() {}

    ngOnInit() {
        let group = {};
        this.formTemplate.forEach(input_template => {
            group[input_template.label] = new FormControl('');
        });
    }
}

Form Template Config File

export class OrdersProductsFormTemplate {
    config = [
        {
            type: "textBox",
            label: "id",
            name: "id",
            width: "50%",
            justify: "left",
            visible: 'true',
            disabled: true
        },
        {
            type: "textBox",
            label: "Name",
            name: "name",
            width: "100%",
            justify: "left",
            visible: 'true',
            disabled: false
        },
        {
            type: "textBox",
            label: "Currency",
            name: "currency",
            width: "100%",
            justify: "left",
            visible: 'true',
            disabled: false
        },
        {
            type: "textBox",
            label: "Retail",
            name: "retailPrice",
            width: "100%",
            justify: "left",
            visible: 'true',
            disabled: false
        },
        {
            type: "textBox",
            label: "Supplier Price",
            name: "supplierPrice",
            width: "100%",
            justify: "left",
            visible: 'true',
            disabled: false
        }
    ];
}

Thanks @developer033 I tried so many different techniques and combinations and this is the only one that worked. I put it on the tag and it did exactly what i was looking for - I will update the answer. — ccocker, Mar 28 '20 at 03:28

Tzimpo · Answer 1 · 2020-03-27T17:45:27.690

0

You can add inline width using [ngStyle] with property width from your array like

<input matInput type="text"formControlName="{{ form_elem.name }}"
      [ngStyle]="{'width':'{{ form_elem.width }}'}" />

or this

<input matInput type="text"formControlName="{{ form_elem.name }}"
      [ngStyle]="{'width': form_elem.width }" />

edited Mar 27 '20 at 17:45

answered Mar 27 '20 at 16:57

Tzimpo

964
1
9
24

Yes i had already tried that but i get a compile error in the template with {{form_elem_name}} in or out of quotes ERROR in Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 10 in [{'width':'{{ form_elem.width }}'}] – ccocker Mar 27 '20 at 17:32

score 0 · Answer 2 · answered Mar 28 '20 at 03:33

This is the only thing that seemed to work, putting the style attribute on the mat-form filed tag and referencing the form_elem.width property without interpolation.

Corrected Template Code

<div fxLayout="row">
    <div [formGroup]="formGroup" fxLayoutAlign="start" fxLayoutGap="10px">
        <div *ngFor="let form_elem of formTemplate">
            <div *ngIf="form_elem.visible === 'true'">
                <mat-form-field [style.width]="form_elem.width">
                    <mat-label>{{ form_elem.label }}</mat-label>
                    <input
                        matInput
                        type="text"
                        formControlName="{{ form_elem.name }}"

                    />
                </mat-form-field>
            </div>
        </div>
    </div>
</div>

Dynamic Angular Forms: How to Set Input Width Dynamically for Each Control

2 Answers2