Erstellen Sie ein Formular mit Eingabesteuerelementen dynamisch aus JSON mit Angular 2

Ich muss ein Formular mit Steuerelementen dynamisch aus JSON mit Angular 2.0 erstellen.Erstellen Sie ein Formular mit Eingabesteuerelementen dynamisch aus JSON mit Angular 2

Ich bin sehr neu in Angular 2.0 und Typoskript. Ich bin total ahnungslos, wo ich mit der Entwicklung anfangen soll.

Jede Hilfe wird sehr geschätzt.

Unten ist die Probe JSON

"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 
          } 
         ] 
        } 
       ] 
      } 
     ] 
    }

Quelle

2016-11-30 Prasanna venkatesan.j

Hast Du diesen Führer gesehen? https://angular.io/docs/ts/latest/cookbook/dynamic-form.html – yurzui

Haben Sie etwas versucht? – silentsod

@yurzui: Ich habe das Beispiel versucht, das in angular.io/docs/ts/latest/cookbook/dynamic-form.html erwähnt wurde, und ich war in der Lage, die UI zu erstellen, indem ich meine JSON analysierte. Aber ich brauche einige Steuerelemente, um in derselben Zeile zu sein, anstatt sie in einer separaten Zeile anzuzeigen. Da das Beispiel eine switch-Anweisung zum Anzeigen meiner Steuerelemente verwendet, bin ich mir nicht sicher, ob ich meine Anforderung erfüllen soll. Bitte beraten. –

Sie benötigen eine Formbuilder von @ Winkel/Formulare zu importieren. Erstellen Sie dann eine FormGroup.

public form: FormGroup; 

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

    _fb.group(obj); 

}

Auf der Vorlage müssen Sie Schleife durch die Formularsteuerelemente und und erstellen Sie das Formular basierend auf dem Typ.

Diese Antwort kann möglicherweise nicht alle Antworten geben, die Sie benötigen, aber es ist ein Augenöffner auf, was Sie tun können.

Sie können FormArrays je nachdem, wie Sie implementieren möchten, verwenden.

Lesen Sie sich die angular2 Dokumentation zu Formularen durch. Sieh dir auch dieses Video an.

Angular 2 Forms | Kara Erickson - YouTube

Forms - ts - GUIDE - Angular

Quelle

2016-11-30 21:06:41 koech

Der JSON, den ich erhalte, wird dynamischer sein und ich kenne die Wurzelelemente nicht, die in dieser Datei enthalten sein werden. –

Sie benötigen eine konsistente Art von Daten, damit die oben genannte Methode funktioniert. Sie können auch die Daten manipulieren und sie zu einem bestimmten Muster machen. – koech

Erstellen Sie ein Formular mit Eingabesteuerelementen dynamisch aus JSON mit Angular 2

Antwort

Verwandte Themen