angular - 如何使用反应形式创建动态列和行？

Question

目标：用户希望根据所选城市生成动态里程表（列和行）。

详细信息：假设我们有多个选择控件，如下所示。

我想根据选定的城市生成里程费率表。

例如：用户选择了 Pune, Navsari 并且 Delhi 是 city 。应根据用户选择生成动态里程费率表以供输入。

并且用户还可以为范围动态添加行，以便他/她可以增加范围行。像 101 - 150, 151 - 200 , 201 - 以上

标签： angularrxjs

Answer 1

用于反应形式的动态列和行

在类型脚本中

第 1 步：初始化响应式表单

this.rForm = this._fb.group({
            CityId: new FormControl(''),                
            CityRangeTable: this._fb.array([
            ])
        });

第2步 ：

在范围按钮上单击或加载现有的城市范围表。

(<FormArray>this.rForm.get('CityRangeTable')).clear();
        this.AddRange(0);

第 3 步：

public AddRange(srNmber: number) {

    let rTable = (<FormArray>this.rForm.get('CityRangeTable'));

    if (rTable.length > 0 ) {
            rTable.at(rTable.length - 1).get('IsLast').patchValue(false);
            EndQuantity = rTable.at(rTable.length - 2).get('EndQuantity').value;
            if (EndQuantity != "") rTable.at(rTable.length - 1).get('StartQuantity').patchValue((+EndQuantity + 1));
            rTable.push(this.CreateRangeTable(true));
        }
} else
{
//add default 2 row for entry
rTable.push(this.CreateRangeTable(false));
                rTable.push(this.CreateRangeTable(true));
}

第4步

private CreateRangeTable(IsLast: boolean): FormGroup {
    return this._fb.group({
                Id: this._fb.control(''),
                StartQuantity: this._fb.control(IsLast, [Validators.required, Validators.pattern(this.decimalSupportedRegx)]),
                EndQuantity: this._fb.control('', [Validators.required, Validators.pattern(this.decimalSupportedRegx)]),
                IsLast: this._fb.control(IsLast),
                group: this.addGroupInRangeTable()
            });

第 5 步：CityList 是多选控件，用户可以在其中选择任意数量的城市 - 动态列

public addGroupInRangeTable(): FormArray {
    let fg = new FormArray([]);
    this.rcForm.get('CityList').value.forEach(x => {
        fg.push(this._fb.group({
            CityId: new FormControl(x.Id),
            CityName: new FormControl(x.Name),
            RateValue: new FormControl('', [Validators.required, Validators.pattern(this.decimalSupportedRegx)])
        }));
    });
    return fg;
}

在 Angular HTML 中

<table class="table table-bordered table-hover mt-3">
                <thead>
                    <tr>
                        <th colspan="3" align="center">City Range Table caption</th>
                        <th *ngFor="let item of freightComponent.rcForm.get('CityList').value">
                            {{item.Name}}
                        </th>
                    </tr>
                </thead>

                <tbody>
                    <ng-container formArrayName="CityRangeTable">
                        <ng-container *ngFor="let item of rForm.get('CityRangeTable')['controls'];let o =index;">
                            <ng-container [formGroupName]="o">
                                <tr>
                                    <td>
                                        <input type="text" formControlName="StartQuantity" class="form-control" [readonly]="item.get('IsLast').value?null:true" />
                                        <div *ngIf="item.get('StartQuantity').invalid && item.get('StartQuantity').touched" class="color-maroon">
                                            <div *ngIf="item.get('StartQuantity').errors.required">
                                                Required.
                                            </div>
                                            <div *ngIf="item.get('StartQuantity').errors.pattern">
                                                Invalid.
                                            </div>
                                        </div>
                                    </td>
                                    <td>To</td>
                                    <td *ngIf="!item.get('IsLast').value">
                                        <input type="text" formControlName="EndQuantity" class="form-control" />
                                        <div *ngIf="item.get('EndQuantity').invalid && item.get('EndQuantity').touched" class="color-maroon">
                                            <div *ngIf="item.get('EndQuantity').errors.required">
                                                Required.
                                            </div>
                                            <div *ngIf="item.get('EndQuantity').errors.pattern">
                                                Invalid.
                                            </div>
                                        </div>
                                    </td>
                                    <td *ngIf="item.get('IsLast').value">
                                        Above
                                        <!--<input type="hidden" formControlName="EndQuantity" value="99999999" />-->
                                    </td>

                                    <ng-container formArrayName="group">
                                        <ng-container *ngFor="let groupDetail of item.get('group')['controls'];let p =index;">
                                            <ng-container [formGroupName]="p">
                                                <td>
                                                    <input type="text" formControlName="RateValue" class="form-control" />
                                                    <div *ngIf="groupDetail.get('RateValue').invalid && groupDetail.get('RateValue').touched" class="color-maroon">
                                                        <div *ngIf="groupDetail.get('RateValue').errors.required">
                                                            Required.
                                                        </div>

                                                        <div *ngIf="groupDetail.get('RateValue').errors.pattern">
                                                            Invalid.
                                                        </div>
                                                    </div>
                                                </td>

                                            </ng-container>
                                        </ng-container>
                                    </ng-container>

                                    <td>
                                        <ng-container *ngIf="o==(rForm.get('CityRangeTable')['controls'].length-1)">
                                            <a type="button"
                                               class="fa fa-plus-circle mt4 mr5 mr10"
                                               title="Add"
                                               (click)="AddRanges(o)">
                                            </a>
                                            <a type="button"
                                               class="fa fa-trash-alt mt7 color-maroon remove-partial-block tier"
                                               title="Remove"
                                               (click)="RemoveRanges(o)">
                                            </a>
                                        </ng-container>
                                    </td>

                                </tr>
                            </ng-container>
                        </ng-container>
                    </ng-container>

                </tbody>
            </table>