Как создать динамический столбец и строку, используя реактивную форму?

avatar
Anish Sinha
9 августа 2021 в 04:22
72
1
-1

Цель: Пользователь хочет создать динамическую таблицу миль (столбец и строку) на основе выбранного города.

Подробности: Предположим, у нас есть несколько элементов управления выбором, как показано ниже. enter image description here

Я хочу создать таблицу тарифов на мили на основе выбранных городов.

Например: пользователь выбрал города Пуна, Навсари и Дели. на основе выбора пользователя для ввода должна быть сгенерирована таблица динамических миль.

, а также пользователь может динамически добавлять строку для диапазона, чтобы он / она мог увеличить строку диапазона. как 101 - 150, 151 - 200, 201 - Выше

enter image description here

Источник
Jayoti Parkash
9 августа 2021 в 04:32
1

взгляните сюда: stackblitz.com/edit/…

Anish Sinha
9 августа 2021 в 17:02
0

спасибо, что поделились ссылкой, но это только динамическая строка, а не динамический столбец - Джайоти Паркаш

Ответы (1)

avatar
Anish Sinha
10 августа 2021 в 05:22
0

для динамического столбца и строки в реактивной форме

Шрифтом

Шаг 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>