如何使複雜的表格嵌套模式 - 角4

Question

我有一個相當複雜的角形式，配置有三列：

1）分類 - 顯示大類

2）項目 - 顯示選定的主要類別

3）參數顯示所選項目參數項目

關鍵功能：

• 項目可以從幾個不同的類別中選擇;
• 每個項目的參數都有一個「啓用」複選框，因此可以在每個類別中同時選擇多個項目;
• 另外每個項目有幾個共同的參數，並可能有一些單獨的參數（它們的任意數量）;

我需要建立模型，該模型應該能夠映射到JSON是這樣的：

{ 
 
    "project_id": "1", 
 
    "name": "some name", 
 
    "category_1": [ 
 
    { 
 
     "param_1": 10, 
 
     "items": [ 
 
     { 
 
      "common_param_1": "echo", 
 
      "common_param_2": "Simple hello", 
 
      "individual_params": { 
 
      "name": "John", 
 
      "age": "18" 
 
      // arbitrary number of other individual params here 
 
      }, 
 
      "common_param_3": 10.0, 
 
      "common_param_4": 1000, 
 
      "common_param_5": 50.0 
 
     } 
 
     // arbitrary number of items here 
 
     ], 
 
     "param_2": "seq" 
 
    } 
 
    ] 
 
    // several other categories 
 
}

形式與ngModel

當前狀態：

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)"> 
 
    <h1>Add config</h1> 
 
    Name: <input type="text" name="name" ngModel class="text_input" placeholder="item configuration name here.."> 
 
    Schedule: <input type="text" name="schedule" ngModel class="text_input" placeholder="MM/DD/YYYY HH:MM:SS"> 
 

 
    <table class="selection_table"> 
 
    <tr> 
 
     <td width=15%> 
 
     <div style="height: 100%"> 
 
      <b>categorys:</b> 
 
      <select name="category" size="10" ngModel style="position: relative; width: 100%; height: 93.5%" (click)="select_category($event)"> 
 
      <option *ngFor="let category of categories" value="{{category}}">{{category}}</option> 
 
      </select> 
 
     </div> 
 
     </td> 
 
     <td width=35%> 
 
     <div style="height: 100%"> 
 
      <b>Items:</b> 
 
      <select name="items" ngModel size="10" style="position: relative; width: 100%; height: 70%" (click)="select_item($event)"> 
 
      <option *ngFor="let item of items" value="{{item}}">{{item}}</option> 
 
      </select> 
 
      <div style="height: 24%"> 
 
      <div style="float: left"><input type="checkbox">Show only selected items</div> 
 
      <div style="float: left; margin-top: 22px; width: 150px">Param_1: <input type="text" name="param_1" ngModel="180" size="5" value="180" style="text-align: center"></div> 
 
      <div style="float: right; margin-top: 1px;text-align: left;width: 130px"> 
 
       <div><input type="radio" name="param_2">Mode_1</div> 
 
       <div><input type="radio" name="param_2">Mode_2</div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </td> 
 
     <td width=50%> 
 
     <div style="height: 100%"> 
 
      <b>Parameters</b> 
 
      <div> 
 
      Common param 3 
 
      <input type="range" name="common_param_3_slider" ngModel="100" min="1" max="100" value="100" oninput="this.nextElementSibling.value=this.value" style="position: relative; top:7px; width:330px"> 
 
      <input type="text" name="common_param_3_value" value="100" oninput="this.previousElementSibling.value=this.value" style="width: 30px; text-align: center">% 
 
      </div> 
 
      <div> 
 
      Common param 5 
 
      <input type="range" name="common_param_5_slider" ngModel="100" min="1" max="100" value="100" oninput="this.nextElementSibling.value=this.value" style="position: relative; top:7px; width:330px"> 
 
      <input type="text" name="common_param_5_value" value="100" oninput="this.previousElementSibling.value=this.value" style="width: 30px; text-align: center">% 
 
      </div> 
 

 
      <div style="position: relative; margin-top: 30px; text-align: right; width: 250px"> 
 
      <div *ngFor="let param of params" style="margin-top: 10px"> 
 
       {{param | lowercase}}: 
 
       <select name="{{param}}" ngModel style="position: relative"> 
 
       <option *ngFor="let option of options[param]" value="{{option}}">{{option}}</option> 
 
       </select> 
 
      </div> 
 
      <div style="margin-top: 10px;">common_param_5: <input type="text" name="common_param_5" ngModel="30" size="5" value="30" style="text-align: center"></div> 
 
      </div> 
 
      <div style="position:absolute;top: 420px; left: 1000px"><input type="checkbox" (click)="select_enable($event)">Enable</div> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <div style="position: relative; left:446px"> 
 
    <button type="submit">Save</button> 
 
    </div>

目前我已經得到此處理的onsubmit（）：

onSubmit(myForm: NgForm) { 
 
    console.log(myForm.value); 
 
}

但它映射到‘平’JSON和ngModel通過表單創建的上述不支持嵌套。

我試圖讓模型作爲一個單獨的類，但我沒有找到如何使它「動態」來支持任意數量的參數和不同類別的項目。

請問您能分享一下您的想法，我該如何解決這個問題？

謝謝！ :)

Answer 1

我沒有花大量的時間來挖掘你的HTML，但你的問題的一般答案是使用ngModelGroup。這允許您嵌套控件以匹配嵌套結構。

下面是一個例子：

<fieldset ngModelGroup="address"> 
    <label>Street:</label> 
    <input type="text" name="street" ngModel> 

    <label>Zip:</label> 
    <input type="text" name="zip" ngModel> 

    <label>City:</label> 
    <input type="text" name="city" ngModel> 
</fieldset> 

這個例子是從這個博客帖子：https://blog.thoughtram.io/angular/2016/03/21/template-driven-forms-in-angular-2.html#ngmodelgroup-directive