This is my Custom Form Group:
this.productGroup = this.fb.group({
name: ['', Validators.compose([Validators.required, Validators.maxLength(80)])],
variants: this.fb.array([
this.fb.group({
type: '',
options: this.fb.array([])
})
])
});
I am trying to figure out how to pass a string array to options. For example, like this: [ 'string1', 'string2' ]. I have been working on it dynamically and you can see my progress on this stackblitz link. However, I am still unsure about how to fill the array. My goal is to pass a generic string array directly to options.
An example of the variants array structure:
variants: [
{ type: 'Color', options: ['Red', 'Blue'] },
{ type: 'Size', options: ['Small', 'Medium', 'Big'] }
]
Here is the HTML code snippet:
<form [formGroup]="productGroup">
<input formControlName="name">
<div formArrayName="variants" *ngFor="let item of productGroup.controls['variants'].controls; let i = index;">
<div [formGroupName]="i">
<mat-form-field>
<input type="text" placeholder="Variable Type" aria-label="Number" matInput formControlName="type" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let type of types" [value]="type">
{{type}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field>
<mat-chip-list #chipList>
<mat-chip *ngFor="let opt of typesOptionsArray[i]" [selectable]="true"
[removable]="true" (removed)="removeOpt(opt, i)">
{{opt}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input placeholder="Type Options"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addOpt($event, i)">
</mat-chip-list>
</mat-form-field>
</div>
<div class="row">
<a href="javascript:" (click)="addItem()"> Add Variant </a>
<a href="javascript:" (click)="removeItem(i)" *ngIf="i > 0"> Remove Variant </a>
</div>
</div>
</form>