动态表单字段不进入行

Question

我有一个动态 formGroup 模态，我想将 form-fields 分配到行中。

        <div *ngFor="let header of headers">
            <!--row 1-->
            <div class="container" style="background-color:yellow">
                <div class="row" *ngIf="header.options['row'] == '1'">
                    <div class="col-sm">
                        <mat-form-field>
                            <input matInput placeholder="Enter {{header.columnName}}"
                                formControlName={{header.columnID}} />
                            <mat-error>{{header.columnName}} is
                                <strong>required</strong>
                            </mat-error>
                            <mat-hint align="start">Please enter
                                <strong>{{header.columnName}}</strong>
                            </mat-hint>
                        </mat-form-field>
                    </div>
                </div>
            </div>

            <!--row 2-->
            <div class="container" style="background-color:red">
                <div class="row" *ngIf="header.options['row'] == '2'">
                    <div class="col-sm">
                        <mat-form-field>
                            <input matInput placeholder="Enter {{header.columnName}}"
                                formControlName={{header.columnID}} />
                            <mat-error>{{header.columnName}} is
                                <strong>required</strong>
                            </mat-error>
                            <mat-hint align="start">Please enter
                                <strong>{{header.columnName}}</strong>
                            </mat-hint>
                        </mat-form-field>
                    </div>
                </div>
            </div>
        </div>

header数据

  [
    { columnID: 'id', columnName: 'Id', type: 'number', options: { alignment: '', color: '', row: '1' } },
    { columnID: 'make', columnName: 'Make', type: 'string', options: { alignment: '', color: '', row: '1' } },
    { columnID: 'model', columnName: 'Model', type: 'string', options: { alignment: '', color: '', row: '2' } },
    { columnID: 'fuelType', columnName: 'Fuel Type', type: 'string', options: { alignment: '', color: '', row: '2' } },
    { columnID: 'isActive', columnName: 'Is Active?', type: 'bool', options: { alignment: '', color: '', row: '2' } }
];

模态输出。正如您在数据源上看到的那样，'id' 和 'make' 应该在第 1 行，其他的在第 2 行。但它们都是垂直的。任何帮助，将不胜感激。谢谢！

Answer 1

编辑

试试这个

    <div>
        <!--row 1-->
        <div class="container" style="background-color:yellow">
            <div class="row">
              <ng-container *ngFor="let header of headers">
                <div class="col-sm" *ngIf="header.options['row'] == '1'">
                    <mat-form-field>
                        <input matInput placeholder="Enter {{header.columnName}}"
                            formControlName={{header.columnID}} />
                        <mat-error>{{header.columnName}} is
                            <strong>required</strong>
                        </mat-error>
                        <mat-hint align="start">Please enter
                            <strong>{{header.columnName}}</strong>
                        </mat-hint>
                    </mat-form-field>
                </div>
              </ng-container>
            </div>
        </div>

        <!--row 2-->
        <div class="container" style="background-color:red">
            <div class="row">
              <ng-container *ngFor="let header of headers">
                <div class="col-sm" *ngIf="header.options['row'] == '2'">
                    <mat-form-field>
                        <input matInput placeholder="Enter {{header.columnName}}"
                            formControlName={{header.columnID}} />
                        <mat-error>{{header.columnName}} is
                            <strong>required</strong>
                        </mat-error>
                        <mat-hint align="start">Please enter
                            <strong>{{header.columnName}}</strong>
                        </mat-hint>
                    </mat-form-field>
                </div>
              </ng-container>
            </div>
        </div>
    </div>

这应该有效。但是，如果可以将数据结构制作成树，那么在 HTML.

中实现起来会更容易

希望对您有所帮助。编码愉快！

动态表单字段不进入行

Dynamic form fields not going into rows

html

bootstrap-4

angular

angular8