Angular 2を使用してJSONから入力コントロールを動的にフォームを作成する

Question

Angular 2.0を使用してJSONからコントロールを動的にフォームを作成する必要があります。

私はAngular 2.0とTypescriptの新機能です。私は全く知らない、どこから開発を始めるのか。

ご迷惑をおかけして申し訳ありません。

は、下記のサンプルJSONあなたが/角度フォーム@からFormBuilderをインポートする必要があります

"General": { 
     "None": [ 
      { 
       "FieldName": "100", 
       "DisplayName": "Mapping Name", 
       "ClassSize": "col-sm-6 col-xs-12", 
       "Field": [ 
        { 
         "ControlType": "TextBox", 
         "FieldClass": "col-sm-6 col-xs-12", 
         "Required": "True", 
         "MaxLength": "10", 
         "RegularExpression": "" 
        } 
       ] 
      }, 
      { 
       "FieldName": "101", 
       "DisplayName": "Select Target File Type", 
       "ClassSize": "col-sm-6 col-xs-12", 
       "Field": [ 
        { 
         "ControlType": "Dropdown", 
         "FieldClass": "col-sm-6 col-xs-12", 
         "Required": "True", 
         "Options": [ 
          { 
           "Description": "--Please select--", 
           "ID": 0 
          }, 
          { 
           "Description": "Row Per Day", 
           "ID": 1 
          }, 
          { 
           "Description": "Row Per Week", 
           "ID": 2 
          }, 
          { 
           "Description": "Row Per Transaction", 
           "ID": 3 
          } 
         ] 
        } 
       ] 
      } 
     ] 
    } 

Answer 1

です。 FormGroupを作成します。

public form: FormGroup; 

private _buildForm() { 
    let obj = {}; 
    General['None'].forEach(val => { 
    obj[val.fieldname] = new FormControl('', Validators.required); 
    }); 

    _fb.group(obj); 

} 

テンプレートでは、フォームコントロールをループし、そのタイプに基づいてフォームを作成する必要があります。

この回答では、必要なすべての回答が得られるわけではありませんが、できることには目を見張るものです。

実装方法に応じてFormArrayを使用することができます。

フォームのangular2ドキュメントを読んでください。このビデオも見てください。

Angular 2 Forms | Kara Erickson - YouTube

Forms - ts - GUIDE - Angular