Angular 2 - 如何清潔表格

Question

我需要幫助。 我在Angular2中創建應用程序（4），其中Form有2個選擇框和1個複選框。我想要實現這個框的依賴。例如，我有此數組：

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'。 當我選擇使用瞬息萬變時，我想保存什麼並且基於那些向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)); 
} 

但現在當我選擇產品 - >變 - >類型比以前提交我想改變產品並選擇別的東西不同的產品 - >變 - >類型，然後提交我得到了我選擇的最後，但在'類型'中我也有我第一次選擇的東西。那麼當我在Form = Product或Variant中更改聲明時，如何清除productForm中的'type'數組。 而且，如果不是所有項目（框）被選中，我怎樣才能禁用提交表單按鈕？

編輯： Plnkr

Answer 1

它會更好，如果你可以創建一個plunker。 根據我的理解，您可以從每個控件獲取ngModel並清除其他控件的更改值。

要禁用的形式，直到選擇了所有值，每個控件添加required財產和提交補充[disabled]="!productForm.valid"按鈕