मैं कोणीय 8.3, आयनिक 4 का उपयोग कर रहा हूं। मुझे पूर्व-चयनित (चेक) होने के लिए चेकबॉक्स नहीं मिल सकता है। वे सभी अनियंत्रित के रूप में दिखाई देते हैं। एसक्लाइट से आने वाला डेटा मिश्रित होता है (कुछ सच, कुछ झूठा)। यहाँ आयन-सामग्री है:

<ion-content>
  <form *ngIf="frmEventTab" [formGroup]="frmEventTab">
    <ion-grid>
      <div *ngFor="let work of works; let i=index">
          <ion-col col-1 size="2" class="ion-text-center" text-align: center>
            <ion-checkbox formControlName="chkConfirmed" (ionChange)="onChange(work.workId, 'chkConfirmed', $event.checked)" value="work.confirmed"></ion-checkbox>
          </ion-col>
        </ion-row>
      </div>
    </ion-grid>
  </form>
</ion-content>

यहाँ ts कोड है, जैसा कि आप देख सकते हैं, मैं डेटा को setupWorks() में लोड कर रहा हूँ।

import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

import { Work } from '../classes/work';

// Import Services
import { WorkService } from '../classes/work.service';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  works: Work[];               // List of all Works
  frmEventTab: FormGroup;

  constructor(private formBuilder: FormBuilder,
              private ws: WorkService) {

  }

  ngOnInit(){

    this.setupWorks();

  }

  createForm() {

    // Setup Validators
    this.frmEventTab = this.formBuilder.group({
      chkConfirmed: new FormControl()
    });

  }

  setupWorks()
  {
    this.ws
        .getWorkByEventId(1, 1)
        .subscribe((data: Work[]) => {

        // Save incoming data
        this.works = data;

        // Create Form (once we have retrieved the data)
        this.createForm();

    });
  }

  // Checkbox change
  onChange(workId, checkboxType, isChecked) {

    if(isChecked) {
      var x = 0;
    }

 }


}

धन्यवाद पहले से ही।

0
Robert Smith 5 मार्च 2020, 15:40

2 जवाब

true मान को FormControl में जोड़ने का प्रयास करें जहां आप इसे जांचना चाहते हैं:

this.frmEventTab = this.formBuilder.group({
    chkConfirmed: new FormControl(true),
});
0
igor_c 5 मार्च 2020, 15:48
हाय igor_c आपकी पोस्ट के लिए धन्यवाद। हालांकि यह काम नहीं करता है। वह कोड उन सभी की जाँच करता है। मैं उन्हें "work.confirmed" में मान के आधार पर जांचना चाहता हूं। कृपया चेकबॉक्स के लिए html पर एक नज़र डालें: value="work.confirmed"। उन्हें केवल काम के आधार पर जांचा जाना चाहिए। पुष्टि की गई।
 – 
Robert Smith
5 मार्च 2020, 15:52
जब आप प्रतिक्रियाशील प्रपत्र दृष्टिकोण का उपयोग कर रहे हों तो आपको उस तरह से कोई मान पास नहीं करना चाहिए। प्रारंभिक मान .ts फ़ाइल में सेट किया जाना चाहिए। मैं अपना जवाब अपडेट करूंगा
 – 
igor_c
5 मार्च 2020, 15:55
सलाह के लिए आभार! क्या कोई तरीका है जिससे मैं HTML में मान सेट कर सकता हूं? मेरे पास यह सब वहाँ होगा क्योंकि मेरे पास पहले से ही html में लूप के लिए है। अन्यथा मेरे पास दो जगहों पर कोड है।
 – 
Robert Smith
5 मार्च 2020, 15:57
आप टेम्प्लेट संचालित फ़ॉर्म angular.io/guide/forms का उपयोग कर सकते हैं
 – 
igor_c
5 मार्च 2020, 15:58
धन्यवाद इगोर_सी। लूप के लिए टेम्प्लेट ड्राइव का उपयोग करने में क्या शामिल होगा? (चूंकि मैं कई रिकॉर्ड प्रदर्शित करूंगा)। मेरे पास "काम" में प्रत्येक आइटम के लिए एक से अधिक प्रकार के चेकबॉक्स भी होंगे। मैंने उपरोक्त उदाहरण में इसे सरल बना दिया है।
 – 
Robert Smith
5 मार्च 2020, 16:06

मैं यह समझ गया। इसका समाधान चेकबॉक्स पर formControlName टैग या मान टैग का उपयोग नहीं करना है। साथ ही पूरे $event को onChange में वापस भेजें:

<ion-checkbox [checked]="work.confirmed" (ionChange)="onChange(work.workId, 'chkConfirmed', $event)"></ion-checkbox>

ऑनचेंज विधि में, यहां बताया गया है कि आप कैसे जांचते हैं कि यह चुना गया है या नहीं:

onChange(workId, checkboxType, isChecked) {
    if(isChecked.detail.checked) {
      // its checked!
    }
}

यह डेटाबेस से वर्तमान मान (फॉर्म निर्माण के दौरान) को सेट करने और फिर ऑनचेंज विधि में मान को अपडेट करने के लिए एकदम सही काम करता है।

नोट: यह प्रतिक्रियाशील रूपों का उपयोग कर रहा है (टेम्पलेट संचालित रूप नहीं)

नोट #2: यह एक "हैक" समाधान है क्योंकि फॉर्मकंट्रोलनाम से हटाने से इसका मूल्य और अन्य सभी नियंत्रणों का मूल्य उपलब्ध नहीं होगा। तो आपको केवल वर्तमान चेकबॉक्स को अपडेट करने के लिए स्क्लाइट में एक अपडेट स्टेटमेंट बनाना होगा जिसे बदला जा रहा है। (चूंकि अन्य के मूल्यों को फॉर्मग्रुप में संग्रहीत नहीं किया जाएगा)।

या आप उस रिकॉर्ड के लिए सभी मान प्राप्त करने के लिए ऑब्जेक्ट को निम्नानुसार पास कर सकते हैं:

<ion-checkbox [checked]="work.confirmed" (ionChange)="onChange(work, 'chkConfirmed', $event)"></ion-checkbox>

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

अगर किसी को प्रतिक्रियाशील रूपों का उपयोग करके यह सब करने का बेहतर तरीका पता है, तो कृपया मुझे बताएं।

संदर्भ:

https://ionicthemes.com/tutorials/about/forms-and-validation-in-ionic

0
Robert Smith 6 मार्च 2020, 19:35