Angular中的动态窗体控件

Question

我有一个首选项屏幕，用户注册各种服务，这些服务是从服务接收的。

我的JSON是这种东西

[ { 
     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 
] 

所以服务可以发送X分门别类，让用户可以订阅。然后在每个类别中，他可以选择他想订阅的新闻频道。

我正在构建首选项屏幕，并且有点卡住如何创建动态UI，其中列出的所有&用户选择都会传输到服务器进行更新/保存。

使用模板驱动的方法，它很容易创建窗体，但发送值返回不起作用。

很高兴有 - 另外我试图找到一种方法，其中任何更新用户直接将保存到json，以便我没有手动检查每次点击用户并更新json。对于例如如果用户选中“ABC新闻”频道，订阅的选项将变为True。

模板表单

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> 

感谢

Answer 1

您可能需要使用ReactiveFormsModule而不是FormsModule在那里你可以建立从动态的TS。你可以阅读有关REACTIVE FORMS

Answer 2

我设法做到了与模板驱动的形式，反应形式不适合我的情况。 {如果有人发现有活性的形式的方式也让我知道}

的HTML是除了我添加索引有唯一的名字

模板表单

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

或多或少相同这个我通过循环的每个类别都有一个唯一的节点名称。此外，我使用ngModelGroup对元素进行了分组，这在很大程度上有所帮助。

组件代码

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; 
       } 
      }); 
     } 
    } 

我检查，如果表单是脏的，如果是则检查特定节点是脏的，如果是只有去和更新用户的偏好。

我附上了屏幕截图，以了解首选项屏幕是什么。我已经在元素和零样式方面保持简单，以便更容易地看到实际的代码。