दिलचस्प पोस्ट
SQL में कोई उत्पाद समेकित कार्य क्यों नहीं है? एंड्रॉइड – बटन दबाए जाने पर लेआउट में टेक्स्टव्यू जोड़ें मैट्रिक्स में एन के सबसे बड़े तत्वों के सूचकांक प्राप्त करें टच डिवाइस पर ब्राउज़र में डबल-टैप "ज़ूम" विकल्प को अक्षम करें केंद्र को कैसे बूटस्ट्रैप में कंटेनर में खड़ी करना चाहिए ईलेप्से आईडीई में java.io.Console समर्थन ग्रहण: बाहरी जार के साथ निष्पादन योग्य जार कैसे बनाया जाए? टैब या विंडो सक्रिय नहीं होने पर ब्राउज़र कैसे जावास्क्रिप्ट को रोकते हैं? एचटीएमएल / जावास्क्रिप्ट एक क्लिक प्रिंट (कोई संवाद नहीं) facet_wrap प्लॉट में "फ्लोटिंग" अक्ष लेबल जोड़ें संघ के साथ आदेश कैसे करें डॉट के बाद केवल दो दशमलव स्थान छोड़ दें विदेशी मुद्रा का अजीब व्यवहार एक HTML पृष्ठ से एक छवि को खींचने से अक्षम करें फ़ंक्शन कॉल के बाद कोष्ठकों के दो सेट

कोणीय कैसे एकाधिक चेकबॉक्स मान प्राप्त करने के लिए?

मैं एक से अधिक डेटा का चयन करने के लिए कोणीय में चेकबॉक्स का उपयोग कर रहा हूं और आईएम को फार्म पर चेक बॉक्स के मूल्य को प्राप्त करने की कोशिश कर रहा हूं। इसके बदले मूल्य मान प्राप्त हो रहा है, जैसा कि सत्य है। मैंने निम्न कोड को पहले से धन्यवाद दिया है

export class CreatesessionComponent implements OnInit { form : FormGroup ; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.form = this.formBuilder.group({ useremail : new FormArray([ new FormControl('',Validators.required) ]) }); } } 

userdata गतिशील सरणी है जो मुझे डेटाबेस से प्राप्त होगा I

 <div class = "row" formArrayName="useremail; let k = index"> <div class="col-md-8 col-sm-5 col-xs-12 col-lg-8"> <div *ngFor="let data of userdata"> <div class="col-md-6"> <input type="checkbox" name="useremail" formControlName ="{{k}}" [value]="data.email">{{data.email}} </div> </div> </div> </div> 

वेब के समाधान से एकत्रित समाधान "कोणीय कैसे एकाधिक चेकबॉक्स मान प्राप्त करने के लिए?"

अद्यतन करें:

चूंकि आपके पास कई मान हैं जो आप उपयोग करना चाहते हैं, आपको FormArray का उपयोग करना FormArray , क्योंकि FormControl केवल एक मान को कैप्चर कर सकता है।

एक खाली फॉर्मअरे घोषित करने के साथ शुरू करें:

 this.myForm = this.fb.group({ useremail: this.fb.array([]) }); 

अपने ईमेल को बदल दें, और परिवर्तन की घटना के लिए देखें और संबंधित ईमेल और ईवेंट को किसी पद्धति पर onChange जहां आप onChange कि आपने चेक किया है या नहीं, तो संबंधित ईमेल को फ़ॉर्मारेरे में जोड़ दें, अगर यह अनचेक हो, तो फॉर्म एरे से चुने हुए ईमेल को हटा दें :

 <div *ngFor="let data of emails"> <input type="checkbox" (change)="onChange(data.email, $event.target.checked)"> {{data.email}}<br> </div> 

और onChange :

 onChange(email:string, isChecked: boolean) { const emailFormArray = <FormArray>this.myForm.controls.useremail; if(isChecked) { emailFormArray.push(new FormControl(email)); } else { let index = emailFormArray.controls.findIndex(x => x.value == email) emailFormArray.removeAt(index); } } 

अपडेट डेमो


मूल पोस्ट :

कोणीय में, चेकबॉक्स रूपों में मुश्किल होते हैं, इसलिए वास्तविक या false बजाय वास्तविक मान प्राप्त करने के लिए आपको कुछ समाधान करना होगा। यहाँ एक तरीका है

परिवर्तन की घटना को कैप्चर करें और अगर चेकबॉक्स की जाँच की जाती है, तो उस मूल्य के साथ प्रपत्र नियंत्रण में मान सेट करें जिसे आप चाहते हैं:

 <input type="checkbox" name="useremail" formControlName="useremail" (change)="$event.target.checked ? (this.myForm.controls.useremail.setValue(data.email)) : false" > 

@ AJT_82 उत्तर के साथ समस्या यह है कि यदि आप फॉर्म .reset () या या form.patchValue () का उपयोग कर मॉडल को संशोधित करना चाहते हैं, तो यह काम नहीं करेगा। इन समस्याओं को हल करने के लिए आपको ControlValueAccessor इंटरफ़ेस को लागू करने की आवश्यकता है। असल में आपको 2 घटकों को बनाने की आवश्यकता है: ग्रुप घटक जो मॉडल मान रखता है और ControlValueAccessor और चेकबॉक्स घटक को लागू करता है, वास्तविक चेकबॉक्स। मैंने एक विस्तृत विवरण के साथ एक ब्लॉग पोस्ट लिखा है और साथ ही एक प्लंकर बनाया है जो कुछ उदाहरण प्रदर्शित करता है।

अंतिम उपयोग:

 <checkbox-group [(ngModel)]="selectedItems"> <checkbox value="item1">Item 1</checkbox> <checkbox value="item2">Item 2</checkbox> <checkbox value="item3">Item 3</checkbox> <checkbox value="item4">Item 4</checkbox> </checkbox-group> 

समूह घटक का कार्यान्वयन:

 @Component({ selector: 'checkbox-group', template: `<ng-content></ng-content>`, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxGroupComponent), multi: true }] }) export class CheckboxGroupComponent implements ControlValueAccessor { private _model: any; // here goes implementation of ControlValueAccessor ... addOrRemove(value: any) { if (this.contains(value)) { this.remove(value); } else { this.add(value); } } contains(value: any): boolean { if (this._model instanceof Array) { return this._model.indexOf(value) > -1; } else if (!!this._model) { return this._model === value; } return false; } // implementation for add and remove ... } 

चेकबॉक्स घटक:

 @Component({ selector: 'checkbox', template: ` <div (click)="toggleCheck()"> <input type="checkbox" [checked]="isChecked()" /> <ng-content></ng-content> </div>` }) export class CheckboxComponent { @Input() value: any; constructor(@Host() private checkboxGroup: CheckboxGroupComponent) { } toggleCheck() { this.checkboxGroup.addOrRemove(this.value); } isChecked() { return this.checkboxGroup.contains(this.value); } } 

बाल चेकबॉक्स नियंत्रण समूह घटक ( @ होस्ट () डेकोरेटर के संदर्भ)। जब एक चेकबॉक्स को टॉगल करने के लिए क्लिक किया जाता है () समूह घटक पर जोड़ेंऑनराइव () कॉल करें और अगर चेकबॉक्स का मान मॉडल में पहले से है, तो इसे हटा दिया जाता है, अन्यथा यह मॉडल में जोड़ा जाता है।

आप चेक किए गए डेटा की सरणी प्राप्त कर सकते हैं:

 <input .... (change)="onChange(data)" /> onChange(data){ data.checked = !data.checked; } 

सभी जाँच मूल्य प्राप्त करने के लिए

 let checkedValues = userdata.filter(x => x.checked).map(x => x.email);