для динамического столбца и строки в реактивной форме
Шрифтом
Шаг 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>
взгляните сюда: stackblitz.com/edit/…
спасибо, что поделились ссылкой, но это только динамическая строка, а не динамический столбец - Джайоти Паркаш