Angular 2 - how to clean array in form - arrays

Question

I need help.
I create app in Angular2(4) where I have Form with 2 select boxes and 1 checkbox. And I want to achieve dependence this boxes. For example I have this array:
dataJSON = [
{
productName: 'Product 1',
variants: [
{
variantName: 'Variant1',
variantType: [
'Type1', 'Type2', 'Type3'
]
},
{
variantName: 'Variant2',
variantType: [
'Type1', 'Type2', 'Type3'
]
},
{
variantName: 'Variant3',
variantType: [
'Type1', 'Type2', 'Type3'
]
},
]
},
{
productName: 'Product 2',
variants: [
{
variantName: 'Variant1',
variantType: [
'Type1', 'Type2', 'Type3', 'Type4'
]
},
{
variantName: 'Variant2',
variantType: [
'Type1', 'Type2', 'Type3'
]
}
]
},
{
productName: 'Product 3',
variants: [
{
variantName: 'Variant1',
variantType: [
'Type1', 'Type2', 'Type3'
]
},
{
variantName: 'Variant2',
variantType: [
'Type1', 'Type2', 'Type3'
]
},
{
variantName: 'Variant3',
variantType: [
'Type1', 'Type2', 'Type3'
]
},
{
variantName: 'Variant4',
variantType: [
'Type1', 'Type2', 'Type3', 'Type4'
]
}
]
}
];
So when I in first select box choose 'Product 1' then in second select box I will have options: 'Variant1', 'Variant2', 'Variant3'. Then when I choose 'Variant1' I will have in checkboxes options: 'Type1', 'Type2', 'Type3'.
When I choose everithing I want save what and base on that make request to API for data.
What I have now.
<form [formGroup]="productForm" (ngSubmit)="submitForm()">
<div class="form-group row">
<div class="col-md-4 col-sm-4 col-lg-4">
<label>Product</label>
<select formControlName="productName" (change)="productChanged()" class="form-control">
<option >Pick a Product...</option>
<option *ngFor="let l of dataJSON">{{l.productName}}</option>
</select>
</div>
<label>Variant</label>
<div class="col-md-4 col-sm-4 col-lg-4">
<select formControlName="variants" (change)="variantsChanged()" class="form-control">
<ng-template ngFor let-variant [ngForOf]="(variantAfterChangeEvent)">
<option>Pick a variant...</option>
<option *ngFor="let v of variant.variants">{{v.variantName}}</option>
</ng-template>
</select>
</div>
<div class="col-md-4 col-sm-4 col-lg-4">
<label>Type</label>
<ng-template ngFor let-type [ngForOf]="(typeAfterChangeEvent)">
<div *ngFor="let t of type[0].variantType">
<input type="checkbox" class="minimal" (change)="onChange(t, $event.target.checked)"> {{t}}
</div>
</ng-template>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
variantAfterChangeEvent: any[];
typeAfterChangeEvent: any[];
productForm: any;
constructor(private fb: FormBuilder) {
this.productForm = fb.group({
productName: [],
variants: [],
type: this.fb.array([])
});
}
productChanged() {
const productName = this.productForm.get('productName').value;
this.variantAfterChangeEvent = this.dataJSON.filter(s = > s.productName);
}
variantsChanged() {
const variants = this.productForm.get('variants').value;
this.typeAfterChangeEvent = this.variantAfterChangeEvent
.filter((element) =>
element.variants.some((subElement) => subElement.variantName === variants))
.map(element => {
const newElt = Object.assign({}, element ); // copies element
return newElt.variants.filter(subElement => subElement.variantName === variants);
});
}
onChange(type: string, isChecked: boolean) {
const typeFromArray = <FormArray>this.productForm.controls.type;
if (isChecked) {
typeFromArray.push(new FormControl(type));
} else {
const index = typeFromArray.controls.findIndex(x => x.value === type)
typeFromArray.removeAt(index);
}
console.log('onChange() ' + JSON.stringify(this.productForm.value));
}
submitForm() {
console.log('submitForm ' + JSON.stringify(this.productForm.value));
}
But now when I choose Product -> Variant -> Type and than before Submit I want change Product and choose something else different Product -> Variant -> Type and then Submit I get what I choose as last but in 'type' I have also what I choose first time. So how can I clean 'type' array in productForm when I change somenting in Form = Product or Variant.
And also how can I disable Submit Form Button when not all items(boxes) are selected?
EDIT:
Plnkr

Answer 1

It would be better if you could create a plunker.
Based on what I understood, you can get ngModel from each control and clear other control's value on change.
To disable the form until all values are selected, add required property in each control and add [disabled]="!productForm.valid" in submit button