Вот код для добавления атрибутов
<button type="button" class="btn btn-success btn-sm mt-3 pull-right"
(click)="addFormGroupAttribute()">Add Field</button>
<div formArrayName="attributes"
*ngFor="let val of productForm.get('attributes')?.controls; let i = index">
<div [formGroupName]="i">
<div class="row" style="margin-left:0px;">
<div class="">
<p class="font-title-s">Attributes</p>
<ng-select class="sm-select xs mt-2 sizebdropdown colordrop" bindValue="name" bindLabel="name"
autocomplete="name" formControlName="name" [items]="attributes" placeholder="-Select Size-" (change)="attributeChange($event, i)"></ng-select>
</div>
<div class="" style="padding-left:4px;width: 287px !important;margin-top: 30px !important;">
<ng-select class="sm-select xs mt-2 sizebdropdown colordrop" bindValue="value" bindLabel="value"
autocomplete="value" formControlName="value" [multiple]="true" [items]="populatedValues" placeholder="-Select Size-"></ng-select>
</div>
</div>
</div>
Вот данные атрибутов, которые я сохранил в базе данных,
Конструктор форм
this.productForm = this.formBuilder.group({
attributes: this.formBuilder.array([
this.addAttributeForm()
]),
});
addAttributeForm():FormGroup {
return this.formBuilder.group({
name: [, [Validators.required]],
value: [, [Validators.required]],
})
}
Что мне нужно, когда я получаю данные в форме редактирования, я хочу установить значение атрибутов, выбранное в ng-select (например, красный, зеленый).
Я возможность установить имя, выбранное с помощью этого фрагмента кода
this.productForm.setControl('attributes', this.setExistingValueAtrributes(this.product.attributes));
setExistingValueAtrributes(values): FormArray {
const formArray = new FormArray([]);
values.forEach(v => {
formArray.push(this.formBuilder.group({
name: v.name,
value: v.value
}))
});
Форма редактирования HTML такая же, как и форма добавления.