- アンギュラ4

Question

私は3つの列で、かなり複雑な角度フォーム・コンフィギュレータを持っている

：

1）カテゴリー - 示して主要なカテゴリ

2）アイテム - 選択された主要なカテゴリ

3）選択した項目のパラメータショーパラメータの項目を示し

主な機能：

• 項目はいくつかの異なるカテゴリから選択できます。
• 各項目のパラメータに「有効」チェックボックスがあるため、各カテゴリでいくつかの項目を同時に選択することができます。
• また、各項目にはいくつかの共通パラメータがあり、いくつかの個別パラメータ（任意の数）を持つことができます。

  { 
   
      "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>

  私はこのようなJSONにマッピングすることができるはずのモデルを作成する必要が

現在

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

をしかし、それは、上記のフォームが作成した 『フラット』 JSONとngModelはネスティングをサポートしていないためにマッピングしますたonSubmit（）のために、このハンドラを得た」VEの。

私は別のクラスとしてモデルを作成しようとしましたが、さまざまなカテゴリの任意の数のパラメータとアイテムをサポートするための "動的"な方法を見つけられませんでした。

この問題を解決するにはどうすればいいですか？

ありがとうございます！ :)

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