Я пытаюсь создать динамическое c создание формы на основе трех опций, таких как «размер, цвет, материал» в ng-select на angular 8 на основе реактивной формы. и у меня возникают проблемы при добавлении более трех шагов, а также при удалении значений параметров. Я новичок в angular. подскажите, как решить эту проблему.
Ожидаемый результат следующий:
У меня есть код angular8 следующим образом
product-manage.component. html
<!-- Variant Information -->
<h6 class="heading-small text-muted mb-4">Variant</h6>
<div class="pl-lg-4">
<div class="row">
<div class="form-group custom-control custom-checkbox">
<input class="custom-control-input" id="productVariant" type="checkbox"
formControlName="productVariantEnable">
<label class="custom-control-label" for="productVariant">This product has variant</label>
</div>
</div>
<div *ngIf="this.productForm.get('productVariantEnable').value">
<div formArrayName="variantDetails">
<div class="inner"
*ngFor="let variant of this.productForm.get('variantDetails').controls; let i = index">
<div [formGroupName]="i">
<div class="row" formGroupName="commonVariant">
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="optionName{{i}}">Option Name {{i+1}}</label>
<select id="optionName{{i}}" class="form-control form-control-alternative"
formControlName="optionName">
<option value="" disabled>Select Option Name</option>
<option *ngFor="let option of variantOption">{{option}}</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="optionValues{{i}}">Option Values {{i+1}}</label>
<ng-select bindValue="name" id="optionValues{{i}}" [addTag]="true" [multiple]="true"
[hideSelected]="true" [minTermLength]="1"
typeToSearchText="Please enter 2 or more characters" formControlName="optionValue"
(change)="onOptionValueChange($event,i)">
</ng-select>
</div>
</div>
<div class="col-lg-4">
<button class="btn btn-sm btn-danger" type="button"
(click)="fnRemoveOption(i)">Remove</button>
</div>
</div>
</div>
</div>
<div class="col-lg-4 p-0" *ngIf="variantCount < 2">
<button class="btn btn-primary" type="button" (click)="fnAddOption()">Add</button>
</div>
</div>
<hr class="my-4" />
<!-- Variant Preview -->
<h6 class="heading-small text-muted mb-4">Variant Preview</h6>
<div class="row" formArrayName="variantInfo">
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Variant</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
<th scope="col">SKU</th>
<th scope="col">Barcode</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let variantInf of this.productForm.get('variantInfo').controls; let j = index"
id="{{variantInf.value.variant}}" [formGroupName]="j">
<td class="p-1">
<div class="form-group">
<!-- <input type="hidden" id="variantId" formControlName="variantId"> -->
<input type="text" id="productVariant" class="form-control form-control-alternative"
placeholder="Variant" formControlName="variant">
</div>
</td>
<td class="p-1">
<div class="form-group">
<input type="text" id="productVariantPrice" class="form-control form-control-alternative"
placeholder="Price" formControlName="variantPrice">
</div>
</td>
<td class="p-1">
<div class="form-group">
<input type="text" id="productVariantQuantity"
class="form-control form-control-alternative" placeholder="Quantity"
formControlName="variantQuantity">
</div>
</td>
<td class="p-1">
<div class="form-group">
<input type="text" id="productVariantSku" class="form-control form-control-alternative"
placeholder="SKU" value="" formControlName="variantSKU">
</div>
</td>
<td class="p-1">
<div class="form-group">
<input type="text" id="productVariantSku" class="form-control form-control-alternative"
placeholder="Barcode" value="" formControlName="variantBarcode">
</div>
</td>
<td>
<div class="form-group">
<button class="btn btn-sm btn-danger" type="button"
(click)="fnRemoveVariant(j)">Remove</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
product-manage.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray, FormControl } from '@angular/forms';
@Component({
selector: 'str-product-manage',
templateUrl: './product-manage.component.html',
styleUrls: ['./product-manage.component.scss']
})
export class ProductManageComponent implements OnInit {
productForm: FormGroup;
submitted = false;
variantCount = 0;
variantLoopCount = 0;
firstEventLength = 0;
secondEventLength = 0;
thirdEventLength = 0;
variantPreviewCount: number;
variantOption: any = ['Size', 'Color', 'Material'];
// productVariantEnable: boolean = true;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.productForm = this.formBuilder.group({
productVariantEnable: false,
variantDetails: this.formBuilder.array([
this.initVariant()
]),
variantInfo: this.formBuilder.array([]),
});
// console.log(this.variantDetailsArray.length);
}
initVariant() {
return this.formBuilder.group({
commonVariant: this.formBuilder.group({
optionName: [''],
optionValue: ['']
})
});
}
get variantDetailsArray() {
return this.productForm.get('variantDetails') as FormArray;
}
get variantInfoArray() {
return this.productForm.get('variantInfo') as FormArray;
}
fnAddOption() {
this.variantCount = this.variantCount + 1;
this.variantDetailsArray.push(this.initVariant());
}
fnRemoveOption(variantIndex: number) {
this.variantCount = this.variantCount - 1;
this.variantDetailsArray.removeAt(variantIndex);
}
fnRemoveVariant(variantIndex: any){
this.variantInfoArray.removeAt(variantIndex);
this.variantLoopCount = this.variantLoopCount + 1;
}
initPreviewVariant(variant) {
return this.formBuilder.group({
// variantInfo: this.formBuilder.group({
// variantId: [],
variant: [variant],
variantPrice: [''],
variantQuantity: [''],
variantSKU: [''],
variantBarcode: ['']
// })
});
}
onOptionValueChange(event, optionCount) {
if (event.length > 0) {
this.variantLoopCount = 1;
for (const variant of event) {
const variantOption = this.variantDetailsArray.length;
if (variantOption === 1) {
this.firstEventLength = event.length;
const variantId = optionCount;
if (event.length === this.variantLoopCount) {
this.variantInfoArray.push(this.initPreviewVariant(variant.label));
}
console.log(this.variantInfoArray);
this.variantLoopCount = this.variantLoopCount + 1;
}
if (variantOption === 2) {
const firstVariantInfo = this.variantInfoArray.value;
this.secondEventLength = event.length;
if (this.firstEventLength > this.secondEventLength){
const jsonVal = [];
for (const secVal of firstVariantInfo) {
const secVariantAppend = secVal.variant + '/' + variant.label;
jsonVal.push({variant: secVariantAppend });
console.log(secVariantAppend);
// this.variantInfoArray.setValue();
}
this.variantInfoArray.patchValue(jsonVal);
}else{
}
// console.log(this.variantInfoArray.value);
}
if (variantOption === 3) {
// console.log(this.variantInfoArray[2]);
}
}
}
// console.log(this.productForm.get(['variantDetails', '0']).value);
}
}
Я застрял здесь на две недели. предложить, как я могу этого достичь. Заранее спасибо.