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"按钮