Question

我不知道这是否可行，但是我建立了一个动态表单组件，该组件运行良好，并且可以通过配置文件控制许多项目。

我无法控制的一项是输入字段的宽度，我尝试了十多种方法，但似乎无济于事。即在创建表单控件等时在组件中设置宽度

有人知道我想做的事实际上是否可以实现，并且可以为我指明正确的方向。

模板代码

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

打字稿代码

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('');
        });
    }
}

表单模板配置文件

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
        }
    ];
}

Answer 1

您可以使用[ngStyle]添加内联宽度，并使用数组中的属性宽度，例如

        Dim table As New Table()
        Dim tr As TableRow
        Dim tc As TableCell
        Dim paragraph As New Paragraph
        Dim tblProp As New TableProperties(
            New TableBorders(
                New TopBorder() With {.Val = New EnumValue(Of BorderValues)(BorderValues.None), .Size = 0},
                New BottomBorder() With {.Val = New EnumValue(Of BorderValues)(BorderValues.None), .Size = 0},
                New LeftBorder() With {.Val = New EnumValue(Of BorderValues)(BorderValues.None), .Size = 0},
                New RightBorder() With {.Val = New EnumValue(Of BorderValues)(BorderValues.None), .Size = 0},
                New InsideHorizontalBorder() With {.Val = New EnumValue(Of BorderValues)(BorderValues.None), .Size = 0},
                New InsideVerticalBorder() With {.Val = New EnumValue(Of BorderValues)(BorderValues.None), .Size = 0}
                ),
                New TableStyle() With {.Val = "TableGrid"},
                New TableWidth() With {.Width = "5000", .Type = TableWidthUnitValues.Pct}
            )

        table.AppendChild(Of TableProperties)(tblProp)
        For Each acronym As Acronym In listOfAcronyms
            tc = New TableCell
            tr = New TableRow
            tc.Append(New TableCellProperties(New TableCellWidth() With {.Type = TableWidthUnitValues.Dxa, .Width = "2400"}))

            rPr = New RunProperties
            newRun = New Run
            fontSize = New DocumentFormat.OpenXml.Wordprocessing.FontSize
            fontSize.Val = "12pt"
            runFonts1 = New RunFonts() With {.Ascii = "Times New Roman"}
            rPr.Append(runFonts1)
            rPr.Append(fontSize)
            newRun.Append(rPr)
            newRun.Append(New Text(acronym.Abbreviation))
            tc.Append(New Paragraph(newRun))
            tr.Append(tc)

            rPr = New RunProperties
            newRun = New Run
            tc = New TableCell
            fontSize = New DocumentFormat.OpenXml.Wordprocessing.FontSize
            fontSize.Val = "12pt"
            runFonts1 = New RunFonts() With {.Ascii = "Times New Roman"}
            rPr.Append(runFonts1)
            rPr.Append(fontSize)
            newRun.Append(rPr)
            newRun.Append(New Text(acronym.Full_Text))
            tc.Append(New Paragraph(newRun))
            tr.Append(tc)

            table.Append(tr)
        Next
        body.Append(table)

或这个

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

Answer 2

这是唯一可行的方法，将style属性放在mat-form字段标签上，并引用form_elem.width属性而不进行内插。

更正的模板代码

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

动态角度形式：如何为每个控件动态设置输入宽度

2 个答案: