Angulaire 2 - comment nettoyer la matrice sous forme

Question

J'ai besoin d'aide. Je crée une application dans Angular2 (4) où j'ai Form avec 2 cases de sélection et 1 case à cocher. Et je veux atteindre la dépendance de ces cases. Par exemple je ce tableau:

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' 
      ] 
     } 
     ] 
    } 
    ]; 

Alors, quand je dans la première boîte de sélection Choisissez l'option « Produit 1 », puis dans la deuxième boîte de sélection j'avoir des options: « variant1 », « variant2 », « Variant3 ». Ensuite, quand je choisis 'Variant1', j'aurai dans les cases à cocher les options: 'Type1', 'Type2', 'Type3'. Quand je choisis, je veux sauvegarder quoi et baser sur cette demande make à l'API pour les données.

Ce que j'ai maintenant.

<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)); 
} 

Mais maintenant, quand je choisis des produits -> Variante -> Type et qu'avant Submit Je veux changer de produit et choisir quelque chose d'autre produit différent -> Variante -> Type puis Submit je reçois ce que je choisis en dernier, mais en 'type' j'ai aussi ce que je choisis la première fois. Alors, comment puis-je nettoyer tableau 'type' dans productForm quand je change somenting dans Form = Product ou Variant. Et comment puis-je désactiver le bouton Envoyer formulaire lorsque tous les éléments (boîtes) ne sont pas sélectionnés?

EDIT: Plnkr

Answer 1

Il serait mieux si vous pouvez créer un plunker. D'après ce que j'ai compris, vous pouvez obtenir ngModel à partir de chaque contrôle et effacer la valeur d'un autre contrôle en cas de modification.

Pour désactiver la forme jusqu'à ce que toutes les valeurs sont sélectionnées, ajouter required propriété dans chaque commande et ajouter [disabled]="!productForm.valid" dans le bouton d'envoi