using angular 2 formbuilder i'm trying to insert data into the second array? "modelArray"; Here is a part of my ts and html file
createModelArray(): void {
this.dataFRM = this.fb.group({
docNo: [null, Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(30)])],
companyId: [null, Validators.compose([Validators.required])],
purchaseTypeId: [null, Validators.compose([Validators.required])],
transactionsDate: [null, Validators.compose([Validators.required])],
wareHouseId: [null, Validators.compose([Validators.required])],
storeId: null,
note: null,
taxTotal: null,
discountTotal: null,
grandTotal: null,
transportationAmount: null,
orderNo: null,
orderedBy: null,
invoiceDispatchDate: null,
maturityDate: null,
deliveryAddress: null,
status: true,
userId: CONFIG.userInfo.userId,
lastModifiedBy: null,
modelDetail: this.fb.array([
this.initModelDetail()
])
});
}
initModelDetail(): any {
return this.fb.group({
modelName: ['', [Validators.required, Validators.minLength(3)]],
price: ['', [Validators.required]],
exchange: [''],
sizeGroup: null,
modelArray: this.fb.array([
this.initmodelArray()
])
});
}
initmodelArray(): any {
return this.fb.group({
colorId: ['', Validators.required],
sizeId: [],
price: [],
qty: [1, Validators.required]
})
};<div class="row">
<form [formGroup]="dataFRM" class="form-horizontal" autocomplete="off" novalidate>
<div class="container">
<div class="col-xs-12">
<div class="margin-20">
<h4>SatinAlma Detay</h4>
</div>
<div class="margin-20">
<a class="btn btn-default" (click)="addModelInfo()" style="cursor: default"> {{"SYSTEM_CRUD.NEW"|translate}}</a>
</div>
<div formArrayName="modelDetail">
<div class="panel panel-default" [formGroupName]="i" *ngFor="let project of dataFRM.controls.modelDetail.controls; let i = index">
<div class="panel-heading">
<span>Model {{i + 1}}</span>
<span class="glyphicon glyphicon-remove pull-right" (click)="removeModel(i)"></span>
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-xs-3">
<label>Model Adı</label>
<input type="text" class="form-control" formControlName="modelName" placeholder="model adı..">
</div>
<div class="form-group col-xs-3">
<label>Fiyati</label>
<input type="number" class="form-control" formControlName="price" placeholder="fiyat..">
</div>
<div class="form-group col-xs-3">
<label>Doviz</label>
<ng-select formControlName="exchange" [options]="exchangeList" [multiple]="false" [allowClear]="true" placeholder="doviz seçiniz.."></ng-select>
</div>
<div class="form-group col-xs-3">
<label>Beden Seti</label>
<ng-select formControlName="sizeGroup" [options]="sizeGroupList" [multiple]="false" [allowClear]="true" (selected)="getSizeList($event.value)"
placeholder="benden seti seçiniz.."> </ng-select>
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-12">
<div formArrayName="modelArray">
<div class="table table-bordered table-hover table-resonsive table-striped">
<thead>
<tr>
<th>Rengı</th>
<th>Fiyati</th>
<th>İşlem</th>
<th><button class="btn btn-primary" (click)="addColor(project.controls.modelArray.controls)"> Yeni</button></th>
</tr>
</thead>
<tbody>
<div [formGroupName]="x" *ngFor="let detail of project.controls.modelArray.controls; let x = index">
<tr>
<td>
<ng-select formControlName="colorId" [options]="colorsList" [multiple]="false" [allowClear]="true" placeholder="ürün seçiniz.."></ng-select>
</td>
<td>
<input type="number" class="form-control" formControlName="price" placeholder="fiyati..">
</td>
<td class="text-right">
<div class="btn-group">
<a class="btn btn-danger btn-xs btn-rounded" (click)="removeColor(X)"><i class="fa fa-trash"></i> Sil</a>
</div>
</td>
</tr>
</div>
</tbody>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="margin-20">
<a class="btn btn-default" (click)="addModelInfo()" style="cursor: default"> {{"SYSTEM_CRUD.NEW"|translate}}</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</form>
</div>Thanks in advance.
