如何在Angular中使用* ngFor設置formControlNames？

我試圖在數組中使用*ngFor來設置窗體控件。根據用戶的不同，有時我會在Array中有1個對象，但有時候會有多個對象。如何在Angular中使用* ngFor設置formControlNames？

我的問題是，我想創建一個formControlName使用循環，我可以但不知道如何在組件中設置窗體組驗證程序？只是將它們設置爲像下面那樣意味着如果只有1個對象，則在查找不存在的其他formControlName時，該表單仍然無效。

所以，如果有名稱的第一個對象：「天」不是在列表中，「天」仍然會在this.form和控件顯示出來：

陣：

indicators = [ 
    {name:"Days",data:[250,1]}, 
    {name:"Multiply Average",data:[3,.25,1]} 
],

組件：

ngOnInit() { 
    this.form = this._fb.group({ 
      "Multiply Average":['', Validators.compose([ 
       Validators.required 
       ])], 
      "Days":['', Validators.compose([ 
       Validators.required 
       ])], 
     }); 
    };

溫度晚：

<span 
    *ngFor="let i of indicators"> 
      {{i.name}}: 
      <md-slider 
      formControlName={{i.name}} 
      color="primary" 
      [max]=i.data[0] 
      [thumb-label]="true" 
      [step]=i.data[1] 
      [min]=i.data[2]> 
      </md-slider> 
    </span>

任何幫助將是巨大的

來源

2017-07-22 Nicholas

@ AJT_82感謝您的答覆。對不起，我應該更清楚。我希望能夠將可變數量的字典傳遞給指標數組。我知道它目前有兩個工作。如果我只傳遞'{name：「Days」，數據：[250,1]}'，但是組件中的「Multiply Average」仍然會有表單控制。該模板只有'Days'的滑塊。有什麼方法可以像循環那樣動態更新這兩種類型？我不確定如果你不知道指標數組的長度是否可能？謝謝 – Nicholas

聽起來像你需要'FormArray'，但我不能再說更進一步，因爲我不知道數組是如何看起來的，我不知道對象內的'data'數組是什麼。準確的預期產出是多少？ formcontrol應該保留什麼值，只是名字？ – Alex

好的謝謝。我會嘗試做一個plunkr來讓它更加清晰。我以前沒有做過，但應該能夠解決這個問題 – Nicholas

你需要的是有條件的驗證。根據您的選擇，您需要設置想要的驗證器，或者刪除它們。這裏給出一個非常簡單的例子，如果你有更多的字段，更多的驗證等等，我建議你看看這個："How to implement conditional validation in Angular model-driven forms"

有一些樣本通過表單控件迭代並使整個事物更具活力，但這個想法與以下相同。

我們可以在用戶在md-select中進行選擇時設置更改事件。你當然也可以使用valueChanges，但我喜歡簡單的改變事件：

<md-select 
    formControlName="indicator1" 
    (change)="checkValue(form.get('indicator1'))"> 
    <md-option 
     *ngFor="let indicator of indicators['indicatorlist']" 
     [value]="indicator"> 
     {{indicator}} 
    </md-option> 
</md-select>

我們通過表單控件，這樣我們就可以藉助該驗證應在情況下，它沒有按」被移除的值進行比較t匹配，在這種情況下，我們要刪除驗證程序，該值不是Above WMA - Volume Price。我們設置/取消的驗證，我們還需要在這裏使用updateValueAndValidity()：

checkValue(ctrl) { 
    if(ctrl.value != "Above WMA - Volume Price") { 
    this.form.get('Multiply Average').setValidators(null); 
    this.form.get('Multiply Average').updateValueAndValidity(); 
    } else { 
    this.form.get('Multiply Average').setValidators(Validators.required); 
    this.form.get('Multiply Average').updateValueAndValidity(); 
    } 
}

相反的setValidators(null)你也可以只用clearValidators()

如前所述，這是一個非常粗糙的樣品只給你的想法。

現在在plunker，如果您在下拉選擇比Above WMA - Volume Price別的東西了，形式現在被認爲是有效的（如果其他領域都有效），即使是在與名Multiply Average這種形式的控制沒有價值。

DEMO：https://plnkr.co/edit/h4nQfg1VYykaGgfNfnWk?p=preview

來源

2017-07-23 07:55:06 Alex

哇，感謝這堆！我知道必須有某種方式，但不知道 – Nicholas

嘿，很高興聽到它的工作！是的，反應形式有許多非常酷的功能。你基本上可以用反應形式做任何事情，哈！只需要一段時間來掌握所有你可以做的事情以及所有內置的方法。:)但是，週末和快樂的編碼有一個很好的結局！ – Alex

是的，我還是比較新的Angular，所以仍然發現很多！這週末肯定是一個更好的結局，解決這個問題哈哈再次感謝 – Nicholas

確保您在form標籤有[formGroup]="form"。

而且使其更詳細的使用性能結合插值，而不是在formControlName屬性

[formControlName]="i.name"

來源

2017-07-22 07:17:12

這與問題無關..'formControlName = {{i.name}}'也是如此:) – Alex

如何在Angular中使用* ngFor設置formControlNames？

回答

相關問題