इस चेकबॉक्स को देखते हुए:

<input type="checkbox" name="sendemail">

मैं कैसे जांच सकता हूं कि यह एंगुलर 10 में चेक किया गया है या नहीं?

मुझे कई उदाहरण मिले हैं लेकिन वे केवल एक मूल्य की जाँच के लिए बहुत जटिल लगते हैं।

धन्यवाद।

3
Pablo Varela 23 अक्टूबर 2020, 06:50
1
एक चर का प्रयोग करें और उस इनपुट पर ngModel सेट करें।
 – 
Derek Wang
23 अक्टूबर 2020, 06:51
आपको कुछ उपाय चेकबॉक्स टू वे डेटा बाइंडिंग से मिल सकते हैं।
 – 
ttquang1063750
23 अक्टूबर 2020, 06:58

3 जवाब

सबसे बढ़िया उत्तर

आप इस तरह [(ngModel)] का उपयोग कर सकते हैं:

एचटीएमएल में

<input id="checkbox" type="checkbox" name="sendemail" [(ngModel)]="isChecked">

TS . में

public isChecked = true;

यहां एक नमूना है इस दृष्टिकोण को दिखा रहा है।

नोट: यदि आप किसी प्रपत्र में इनपुट का उपयोग कर रहे हैं तो आपको [ngModelOptions]="{standalone: true}" जोड़ना चाहिए

4
wnvko 24 अक्टूबर 2020, 10:02

मुझे पता है कि यह एक पुराना है, लेकिन मुझे आशा है कि यह किसी और के लिए उपयोगी हो सकता है, जबकि उसी चीज़ को खोजने की कोशिश कर रहा हो

1- अपनी x.component.ts फ़ाइल में अपना onDelete तरीका बनाएं

    public deleteWave(item: any) {
    
        const sub = this.wavesService.getUpdatedWaveInfo(item.WaveID).subscribe(x => {
          x.WaveName = item.WaveName;
          x.Deleted = true;
          this.cd.detectChanges();
    
          this.updateWaveSubscriber = this.wavesService.updateWave(x).subscribe(() => {
            this.cd.detectChanges();
          });
          sub.unsubscribe();
        });
      }
    
      public onDeleteWave(event, item): void {
        event.preventDefault();
        event.stopPropagation();
        this.deleteWave(item);
        this.cd.detectChanges();
      }
  1. विधि और अपनी x.component.html फ़ाइल में जोड़ें
    <!-- Buttons -->
              <kendo-grid-column [width]="114">
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <div class="live-wave-col0">
                    <button class="grid-toolbar-button grid-toolbar-button-small" (click)="onEditBtnClick($event,dataItem)" title="Edit">
                      <i class="k-icon k-i-edit"></i>
                    </button>
                    <button style="margin:0 2px" class="grid-toolbar-button grid-toolbar-button-small" (click)="onGoFullscreenClick($event,dataItem)" title="Fullscreen">
                      <i class="k-icon k-i-full-screen"></i>
                    </button>
                    <button class="grid-toolbar-button grid-toolbar-button-small" title="Summary" (click)="onShowWaveSummaryClick($event,dataItem)">
                      <i class="k-icon k-i-preview"></i>
                    </button>
                    <button class="grid-toolbar-button grid-toolbar-button-small" [swal]="deleteSwal" title="Delete Wave">
                      <i class="k-icon k-i-delete"></i>
                    </button>
                  </div>
    
                  <!-- Delete Notification -->
                  <swal #deleteSwal
                        title="Are you sure?"
                        text={{messageRecordType}}
                        type="error"
                        confirmButtonText="Yes"
                        cancelButtonText="No"
                        confirmButtonClass="btn btn-primary"
                        cancelButtonClass="btn btn-outline-primary"
                        [showCancelButton]="true"
                        [focusCancel]="true"
                        (confirm)="onDeleteWave($event,dataItem)">
                  </swal>
                </ng-template>
              </kendo-grid-column>
  1. सुनिश्चित करें कि स्वाल का उपयोग करते समय इसे उसी संदर्भ में होना चाहिए और onDelete() विधि को सीधे बटन में नहीं जोड़ा जाएगा, लेकिन swal जहां मोडल पॉप आउट होने के बाद विलोपन की पुष्टि की जाएगी .
0
nilsandrey 5 सितंबर 2021, 22:04

मौसम जानने के कई तरीके हैं एक चेक बॉक्स चेक किया गया है या नहीं आप प्रतिक्रियाशील फॉर्म नियंत्रण या टेम्पलेट संचालित फॉर्म इत्यादि का उपयोग कर सकते हैं। लेकिन आपके मामले में मुझे लगता है कि आप केवल एक चेकबॉक्स की चेक की गई संपत्ति की जांच करना चाहते हैं आसान ऐसा करने का तरीका टेम्पलेट चर का उपयोग करना है और चाइल्ड देखें का उपयोग करके अपनी ts फ़ाइल में उस तक पहुंच बनाना है।

app.component.ts

import { Component, ViewChild } from '@angular/core';

 @ViewChild("mycheckbox") mycheckbox;
 isChecked(){
    //Check the Console for the Output Weather checkbox is checked or not
    console.log(this.mycheckbox.nativeElement.checked);
  }

app.component.html

    <input (change)="isChecked()" #mycheckbox type="checkbox" name="sendemail">

नोट: नियंत्रण पर परिवर्तन घटना का उपयोग करना अनिवार्य नहीं है यदि आप इसे जांचना चाहते हैं जब उपयोगकर्ता जारी रखें आदि जैसे क्लिक करता है तो आप उस क्लिक विधि में #mycheckbox तक पहुंच सकते हैं जैसा कि चेक किया गया है () विधि में दिखाया गया है

2
SaiSurya 23 अक्टूबर 2020, 08:15
2
मैं "आसान तरीका" से सहमत नहीं हूं, मेरे लिए "आसान और कोणीय तरीका" बस [(ngModel)] का उपयोग कर रहा है। -एंगुलर को ts में दो रिलेशन वेरिएबल बना दिया जाता है, जिसे आप .html- में देखते हैं। नोट: आप फ़ंक्शन को तर्क mycheckbox (change)="isChecked(mycheckbox)" के रूप में पास कर सकते हैं और आपको ViewChild का उपयोग करने की आवश्यकता नहीं है
 – 
Eliseo
23 अक्टूबर 2020, 09:37
हाँ, मैं पूरी तरह से ngModel का उपयोग करने के लिए सहमत हूँ और मेरे उत्तर को बेहतर बनाने के लिए आपका बहुत-बहुत धन्यवाद।
 – 
SaiSurya
23 अक्टूबर 2020, 14:18