角度2 - 形式でアレイをきれいにする方法

Question

私は助けが必要です。 2つの選択ボックスと1つのチェックボックスを持つFormを持つAngular2（4）にアプリケーションを作成します。そして、私はこのボックスに依存することを望みます。私は選択肢を持っています第2の選択ボックスで、その後

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

だから私は、最初の選択ボックスで選択した「製品1」：「Variant1」、「Variant2」、「Variant3」をたとえば、私は、この配列を持っています。私が 'Variant1'を選択すると、 'Type1'、 'Type2'、 'Type3'のチェックボックスがあります。 私がeverithingを選択すると、データのAPIにリクエストを行い、何を保存するかを確認します。

私は今何を持っていますか？

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

しかし、今、私は製品を選択するとき - >バリアント - > Typeと私は製品を変更すると、選択した他の何か別の製品たく提出以前より - >バリアント - >タイプしてから、私は私が選択したものを手に入れる提出をとして最後が、 「タイプ」には、私が最初に選んだものもあります。ですから、Form = ProductまたはVariantで型を変更すると、どのようにproductFormの 'type'配列を整理できますか？ また、すべてのアイテム（ボックス）が選択されていない場合は、フォーム送信ボタンを無効にするにはどうすればよいですか？

EDIT： Plnkr

Answer 1

あなたがplunkerを作成することができればそれが良いだろう。 私が理解したことに基づいて、各コントロールからngModelを取得し、変更時に他のコントロールの値をクリアすることができます。

は、すべての値が選択されるまで、フォームを無効にする各コントロールに requiredプロパティを追加し、