2016-09-01 14 views
9

मैं कोणीय 2 (आरसी 5) में एक टेम्पलेट-संचालित फ़ॉर्म बनाना चाहता हूं, जिसमें ऑब्जेक्ट के विशिष्ट विशेषताओं से जुड़े चेक-बॉक्स का समूह शामिल होगा।आवश्यक विशेषता वाले चेकबॉक्स के कोणीय 2 समूह

<div class="checkbox" *ngFor="let prop of properties"> 
    <label> 
    <input type="checkbox" name="option" id="option [(ngModel)]="prop.state"/> 
    {{prop.name}} 
    </label> 
</div> 

हालांकि यह बिल्कुल स्पष्ट है, मैं चेक-बॉक्स के इस समूह के लिए एक आवश्यक विशेषता जोड़ने के लिए कैसे समझ नहीं कर सकते हैं: अभी, मैं इस तरह के समूह, जैसे इसी सरणी से घिरा है। मेरा मतलब यह है कि, मुझे उपयोगकर्ता को चुनने के लिए उपयोगकर्ता को मजबूर करने की आवश्यकता है, कम से कम समूह चेक-बॉक्स में से एक, अन्यथा फॉर्म सत्यापन विफल हो जाएगा।

कोई विचार?

+2

क्या यह एक बॉट है? मैं कोणीय 2 के बारे में बात कर रहा हूं ... – mpilliador

+0

क्या आपने यह देखा है http://stackoverflow.com/questions/6218494/using-the-html5-required-attribute-for-a-group-of-checkboxes – wickdninja

उत्तर

1

मैं आप अपने राज्यों के सभी के साथ एक वस्तु या सरणी है अगर मैं सही ढंग से पढ़ रहा हूँ मान, यानी

properties = [ 
    { state: false }, 
    { state: false }, 
    { state: false }, 
    // ... etc 
]; 

आप भी जान सकते हैं कम से कम एक में से प्रत्येक पर (ngModelChange) सुनकर चेक किया गया है हो सकता है अवयव। अपने onCheckboxChange

<input type="checkbox" name="option" id="option" [(ngModel)]="prop.state" (ngModelChange)="onCheckboxChange()"/> 

और अपनी कक्षा में, atLeastOnePropIsTrue की तरह एक क्षेत्र है, और उसके बाद: जब यह आग, आप तो प्रोप के राज्यों में से कम से कम एक सुनिश्चित करने के लिए जाँच कर सकते हैं अपने टेम्पलेट फ़ाइल में सच है, यानी है फ़ंक्शन इस तरह दिख सकता है:

function onCheckboxChange() { 
    this.atLeastOnePropIsTrue = this.properties.find(a => a.state === true) != null; 
} 

यह बिल्कुल सुंदर नहीं है, लेकिन यह काम करेगा।

संबंधित मुद्दे