Dynamische Formularsteuerung in Angular

Question

Ich habe einen Einstellungsbildschirm, wo Benutzer für verschiedene Dienste anmelden, diese Dienste werden von einem Dienst empfangen.

Mein Json ist etwas dieser Art

[ { 
     category : 'General', 
     source : [ { name: 'ABC News', url: 'abc-news-au', subscribed: false}, 
         { name: 'Associated Press', url: 'associated-press', subscribed: false}], 
     numberofarticles: 4 
    }, 
repeat above node multiple times 
] 

so wurde der Dienst X verschiedene Kategorien schicken könnte, auf die Benutzer abonnieren. Und in jeder Kategorie könnte er dann den Nachrichtenkanal auswählen, den er abonnieren möchte.

Ich baue die Voreinstellung Bildschirm und bin ein bisschen stecken auf, wie die dynamische UI, wo alle von diesem aufgeführten & Benutzer Auswahl auf den Server für Update/speichern übertragen werden.

Mit Vorlage-Ansatz ist es einfach, das Formular zu erstellen, aber senden Wert zurück funktioniert nicht.

Schön zu haben - Auch ich versuche, einen Ansatz zu finden, bei dem ein Update direkt in den JSON gespeichert wird, so dass ich nicht jeden Klick manuell überprüfen und den JSON aktualisieren muss. Für z.B. Wenn der Nutzer den "ABC News" -Kanal überprüft, wird die abonnierte Option zu True.

Vorlage Formular

form (ngSubmit)="onSubmit(f)" #f="ngForm"> 
    <md-tab-group> 
    <md-tab *ngFor="let news of newsList" label={‌{news.category}}> 

     <h3 color="accent">Select news sources</h3> 
     <md-select multiple placeholder="" ngModel name="{‌{news.source}}"> 
      <md-option *ngFor="let source of news.source" [value]="source.name"> 
      {‌{source.name}} 
     </md-option> 
     </md-select> 
     <br> 

     <h3>Number of new articles of each topic</h3> 
     <md-slider ngModel #numberofArticles name="numberofArticles" min="1" max="5" step="1" 
     value={‌{news.NoOfArticles}} tickInterval="auto" thumbLabel></md-slider> 
     <br> 

    </md-tab> 
    </md-tab-group> 
<br> 
<button md-raised-button color="primary" type="submit" >Save</button> 
</form> 

Dank

Answer 1

Sie müssen wahrscheinlich ReactiveFormsModule statt FormsModule verwenden, wo Sie die von dynamisch in TS aufbauen können. Sie können lesen über REACTIVE FORMS

Answer 2

Ich schaffte es mit Vorlage getriebenen Formen zu tun, reaktive Formulare waren nicht für mein Szenario geeignet. {Wenn jemand eine Möglichkeit, mit reaktiven Formen finden lassen Sie mich wissen}

Die html mehr oder weniger die gleiche, außer ich hinzugefügt Index eindeutige Namen haben

Vorlage Formular

<form (ngSubmit)="onSubmit(f)" #f="ngForm"> 

<md-tab-group> 
    <md-tab *ngFor="let news of newsList; let i=index" 
      label={{news.category}} 
      ngModelGroup={{news.category}} 
      #{{news.category}}="ngModelGroup" 
      > 
     <h3 color="accent">Select news sources</h3> 
     <br> 
     <section class="example-section" ngModelGroup="news"> 
       <md-checkbox ngModel class="example-margin" 
          name={{news.category}}_{{x}} 
          *ngFor="let source of news.source; let x=index" 
          [(ngModel)]="source.subscribed"> 
        {{source.name}} 
       </md-checkbox> 
      </section> 

     <h3>Number of new articles of each topic</h3> 
     <md-slider ngModel name="numberofArticles_{{i}}" 
        min="1" max="5" step="1" 
        value={{news.NoOfArticles}} tickInterval="auto" 
        thumbLabel> 
     </md-slider> 
     <br> 
    </md-tab> 
    </md-tab-group> 
    <br> 
    <button md-raised-button color="primary" type="submit" >Save</button> 
</form> 

Mit Jede Kategorie, die durchgeschleift wurde, hatte einen eindeutigen Namen für ihren Knoten. Auch ich gruppierte Element mit ngModelGroup das half viel später.

Component-Code

onSubmit(f: NgForm) { 
    // Check if form is dirty 
     if (f.dirty) { 
      const myControls = f.controls; 
      let i = 0; 
      // Update the user preferences based on what he selected on the ui. DefaultNews is my model data which is needs to be updated 
      const defaultCategories = DefaultNews.defaultNews; 

      defaultCategories.forEach(element => { 
       // Check if the news category is dirty - i.e. each Tab on the UI 
       if ((myControls[element.category]).dirty) { 
        // check if news websites were touched i.e. if any checkbox from the group is updated 
        if ((myControls[element.category].get('news')).dirty) { 
         let newsSubscription; 
         let index = 0; 
         // Read thru each news source and set it from the ui 
         element.source.forEach(newsSource => { 
          newsSubscription = (myControls[element.category].get('news')).get(element.category + '_' + index); 
          newsSource.subscribed = newsSubscription.value; 
          index = index + 1; 
         }); 
        } 
        // check if the number of articles was touched - i.e. if slider was moved 
        if ((myControls[element.category].get('numberofArticles_' + i)).dirty) { 
        element.NoOfArticles = (myControls[element.category].get('numberofArticles_' + i)).value; 
        } 

        i = i + 1; 
       } 
      }); 
     } 
    } 

überprüfte ich, wenn das Formular schmutzig ist, wenn ja dann ein bestimmte Knoten überprüft schmutzig ist, wenn ja nur dann bevorzugt gehen und Update-Benutzer.

Ich habe einen Screenshot hinzugefügt, um eine Idee zu geben, was der Einstellungsbildschirm ist. Ich habe es einfach in Bezug auf Elemente und Null-Styling gehalten, um es einfacher zu machen, den tatsächlichen Code zu sehen.