Angular2 - रेडियो बटन बाइंडिंग

Question

मैं Angular 2 का उपयोग करके रेडियो बटन का उपयोग करना चाहता हूं

Options : <br/>

1 : <input name="options" ng-control="options" type="radio" value="1"  [(ng-model)]="model.options" ><br/>

2 : <input name="options" ng-control="options" type="radio" value="2" [(ng-model)]="model.options" ><br/>

model.options प्रारंभिक मान 1 है

जब पृष्ठ लोड होता है तो पहले रेडियो बटन की जाँच नहीं की जाती है और संशोधनों को मॉडल से बाँधा नहीं जाता है

कोई उपाय ?

Comments

रेडियो डायनेमिक लिस्टिंग उदाहरण यहाँ freakyjolly.com/how-to-show-radio-input-listing-in-angular-6

— कोड जासूस

Answer 1

उपयोग मूल्य []] = "1" के बजाय मूल्य = "1"

<input name="options" ng-control="options" type="radio" [value]="1"  [(ngModel)]="model.options" ><br/>

<input name="options" ng-control="options" type="radio" [value]="2" [(ngModel)]="model.options" ><br/>

संपादित करें:

जैसा कि thllbrg द्वारा सुझाया गया है "कोणीय 2.1+ के [(ngModel)]बजाय [(ng-model)]"

Comments

एनजी-कंट्रोल विशेषता का उद्देश्य क्या है? लगता है कि इसके बिना सब कुछ काम करता है।

— मोनसिनगर

कोणीय 4+ में आपको [(ngModel)]इसके स्थान पर उपयोग करना चाहिए [(ng-model)]। फिर से पढ़ें ।

— क्लाउडियो होलांडा

यह केवल नए मोड को जोड़ने पर काम कर रहा है। संपादन मोड के लिए काम नहीं कर रहा है। मुझे पता नहीं चल पाया कि क्या कारण है। काम करने वाले मॉडल के लिए नए खुले असाइन किए गए मूल्य में, लेकिन काम नहीं कर रहा है जब मैं सर्वर से मान प्राप्त करता हूं और स्क्रीन में दिखा रहा हूं। लेकिन अगर मैं लेबल मूल्य दिखा रहा हूं, लेकिन काम नहीं किया गया है।

— कुमार

मेरे मामले में, मैंने उपयोग करना समाप्त कर दिया value="1" [(ngModel)]="model.options"। valueवर्ग कोष्ठक में संलग्न करना काम नहीं कर रहा था

— सिल्वन डी ऐश

अजीब बात है, लेकिन मेरे मामले में भी, मुझे [मूल्य] = "1" के बजाय मूल्य = "1" का उपयोग करना पड़ा। मैं

— कोडिंगबक

Answer 2

नोट - रेडियो बटन बाइंडिंग अब RC4 में एक समर्थित फीचर है - इस उत्तर को देखें

रेडियो बटन का उपयोग करके कस्टम RadioControlValueAccessor CheckboxControlValueAccessor ( कोणीय 2 आरसी -1 के साथ अद्यतन ) के समान

App.ts

import {Component} from "@angular/core";
import {FORM_DIRECTIVES} from "@angular/common";
import {RadioControlValueAccessor} from "./radio_value_accessor";
import {bootstrap} from '@angular/platform-browser-dynamic';

@Component({
    selector: "my-app",
    templateUrl: "template.html",
    directives: [FORM_DIRECTIVES, RadioControlValueAccessor]
})
export class App {

    model;

    constructor() {
        this.model = {
            sex: "female"
        };
    }
}

template.html

<div>
    <form action="">
        <input type="radio" [(ngModel)]="model.sex"  name="sex" value="male">Male<br>
        <input type="radio" [(ngModel)]="model.sex"  name="sex" value="female">Female
    </form>

    <input type="button" value="select male" (click)="model.sex='male'">
    <input type="button" value="select female" (click)="model.sex='female'">
    <div>Selected Radio: {{model.sex}}</div>
</div>

radio_value_accessor.ts

import {Directive, Renderer, ElementRef, forwardRef} from '@angular/core';
import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/common';

export const RADIO_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => RadioControlValueAccessor),
    multi: true
};

@Directive({
   selector:
       'input[type=radio][ngControl],input[type=radio][ngFormControl],input[type=radio][ngModel]',
   host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
   bindings: [RADIO_VALUE_ACCESSOR]
})
export class RadioControlValueAccessor implements ControlValueAccessor {
   onChange = (_) => {};
   onTouched = () => {};

   constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}

   writeValue(value: any): void {
       this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value == this._elementRef.nativeElement.value);
   }
   registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
   registerOnTouched(fn: () => {}): void { this.onTouched = fn; }
}

स्रोत: https://github.com/angular2-school/angular2-radio-button

प्लंकर लाइव डेमो: http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview

Comments

उसी तरह है कि सवाल प्रासंगिक कोड को शामिल करना चाहिए सवाल में भी जवाब चाहिए,। यह सैद्धांतिक रूप से प्रश्न का उत्तर दे सकता है, लेकिन भविष्य के उपयोगकर्ताओं के लिए उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना सबसे अच्छा होगा। लिंक-वर्चस्व वाले उत्तर लिंक रोट के माध्यम से अमान्य हो सकते हैं ।

— मोगसाद Mog

महान .. यह अजीब बात है कि यह फ्रेमवर्क में शामिल नहीं है

— मूराद ज़ौबी

महान समाधान! एक छोटा सा अतिरिक्त: मैं सीएसएस इनपुट [प्रकार = "रेडियो"] का उपयोग कर रहा: स्टाइल के लिए जाँच की है, लेकिन जब केवल _elementRef के बजाय _elementRef की nativeElement का उपयोग कर यह केवल मेरे लिए काम करता है: this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value == this._elementRef.nativeElement.value);

— बस

@GregWoods नए बदलाव के साथ पोस्ट अपडेट करें और पुल अनुरोध के लिए धन्यवाद,

— Nidin Vinayakan

यह अब मूल रूप से समर्थित है, कोणीय

— rc4

Answer 3

मेरा मैनुअल वर्कअराउंड, जिसमें model.optionsएक नया रेडियो बटन चुने जाने पर मैन्युअल रूप से अपडेट करना शामिल है:

template: `
  <label *ngFor="let item of radioItems">
    <input type="radio" name="options" (click)="model.options = item" 
     [checked]="item === model.options">
    {{item}}
  </label>`

class App {
  radioItems = 'one two three'.split(' ');
  model      = { options: 'two' };
}

यह Plunkerउपरोक्त प्रदर्शित करता है, साथ ही चयनित रेडियो बटन को बदलने के लिए एक बटन का उपयोग कैसे करें - यानी, यह साबित करने के लिए कि डेटा बाइंडिंग दो-तरफ़ा है:

<button (click)="model.options = 'one'">set one</button>

Comments

मेरे पास दो सवाल हैं। पहला: get debug()फंक्शन में क्या होता getहै? दूसरा है: क्या चेकबॉक्स के लिए इस उत्तर की तरह कोई विकल्प है? कृपया चेकबॉक्स के लिए भी कुछ कोड प्रदान करें। महान जवाब के लिए धन्यवाद +1।

— परदीप जैन

@PardeepJain, getएक टाइपस्क्रिप्ट एक्सेसर सुविधा है । चेकबॉक्स के लिए एक प्रश्न पोस्ट करें।

— मार्क राजकोट

इस '{{डिबग (abc)}}' जैसे पैरामीटर भेज सकते हैं?

— परदीप जैन

@PardeepJain, देख plnkr.co/edit/iH3Te9EK7Y1dPXMzfWt6?p=preview । आप किसी फ़ंक्शन की तरह सेटर को कॉल नहीं कर सकते, इसलिए Anotherdate('2015-05-18T02:30:56')काम नहीं करेगा। जब आप किसी प्रॉपर्टी को वैल्यू असाइन करने की कोशिश करते हैं तो सेटर्स मिलते हैं। मेरे प्लंकर में मैंने setDate()एक नया दिनांक मान स्वीकार करने के लिए एक फ़ंक्शन बनाया , जो तब असाइन करता है Anotherdate। वह असाइनमेंट स्वचालित रूप से सेटर को कॉल करेगा।

— मार्क राजकॉक

@PardeepJain, {{}}बाइंडिंग को हर परिवर्तन का पता लगाने वाले चक्र का पुनर्मूल्यांकन किया जाता है। मैं ngDoCheck()परिवर्तन का पता लगाने के चक्रों को गिनने के लिए प्लंकर में AppComponent में लागू किया गया। उससे हम देखते हैं कि परिवर्तन का पता लगाने को 3 बार कहा जाता है। देव मोड में, बाइंडिंग को दो बार जांचा जाता है , इसलिए 6 बार।

— मार्क राजकॉक

Answer 4

यहां Angular2 में रेडियो बटन का उपयोग करने का सबसे अच्छा तरीका है। बाइंड की गई प्रॉपर्टी की वैल्यू को बदलने के लिए (क्लिक) इवेंट या RadioControlValueAccessor का उपयोग करने की कोई आवश्यकता नहीं है, [चेक] प्रॉपर्टी की सेटिंग ट्रिक करती है।

<input name="options" type="radio" [(ngModel)]="model.options" [value]="1"
       [checked]="model.options==1" /><br/>
<input name="options" type="radio"  [(ngModel)]="model.options" [value]="2"
       [checked]="model.options==2" /><br/>

मैंने रेडियो बटन का उपयोग करने का एक उदाहरण प्रकाशित किया: कोणीय 2: एनम से रेडियो बटन कैसे बनाएं और दो-तरफा बंधन कैसे जोड़ें? यह कम से कम कोणीय 2 RC5 से काम करता है।

Comments

यह केवल नए मोड को जोड़ने पर काम कर रहा है। संपादन मोड के लिए काम नहीं कर रहा है। मुझे पता नहीं चल पाया कि क्या कारण है। काम करने वाले मॉडल के लिए नए खुले असाइन किए गए मूल्य में, लेकिन काम नहीं कर रहा है जब मैं सर्वर से मान प्राप्त करता हूं और स्क्रीन में दिखा रहा हूं। लेकिन अगर मैं लेबल मूल्य दिखा रहा हूं, लेकिन काम नहीं किया गया है।

— विनोथ कुमार ०

@VinothKumar क्या आपने संपादन मोड काम करने का प्रबंधन किया है? मैं एक ही मुद्दा है

— डेव नट

Answer 5

यह समस्या क्रमशः रूप में क्रमशः 2.0.0-rc.4 संस्करण में हल की गई है।

Package.json "@angular/forms": "0.2.0"में शामिल करें ।

फिर मुख्य में अपने बूटस्ट्रैप का विस्तार करें। प्रासंगिक भाग:

...
import { AppComponent } from './app/app.component';
import { disableDeprecatedForms, provideForms } from '@angular/forms';

bootstrap(AppComponent, [
    disableDeprecatedForms(),
    provideForms(),
    appRouterProviders
]);

मेरे पास यह .html है और पूरी तरह से काम करता है: मान: {{buildTool}}

<form action="">
    <input type="radio" [(ngModel)]="buildTool" name="buildTool" value="gradle">Gradle <br>
    <input type="radio" [(ngModel)]="buildTool" name="buildTool" value="maven">Maven
</form>

Comments

यह rc4 के रूप में सही उत्तर है और केवल जोड़ने के लिए, रेडियो का उपयोग एनम के साथ किया जा सकता है।

— रॉन

RC7 को चलाने के लिए, मुझे ब्रैकेट लगाने की आवश्यकता थी [मूल्य]

— ब्रायन वेंडर प्लाट्स

मुझे लगता है कि आपको ब्रैकेट्स की आवश्यकता है क्योंकि आपके स्ट्रिंग के बजाय आपके घटक के एक चर का उपयोग करते हुए, मेरे मामले में @ Zolcsi का जवाब ठीक काम करता है!

— नईम बागी

साथ यह हिस्सा disableDeprecatedFormsऔर provideFormsजादुई लग रहा है और किसी भी मतलब नहीं है। ये बातें क्या करते हैं? यह अनजाना अपठनीय कोड है जो अज्ञात पैमाने की अप्रत्याशित चीजों को बनाता है।

— घुमारवीं

Answer 6

मैं उन रेडियो बटनों को संभालने के लिए सही विधि की तलाश कर रहा था जो मुझे यहां मिले समाधान के लिए एक उदाहरण है:

<tr *ngFor="let entry of entries">
    <td>{{ entry.description }}</td>
    <td>
        <input type="radio" name="radiogroup" 
            [value]="entry.id" 
            (change)="onSelectionChange(entry)">
    </td>
</tr>

चालू तत्व को बदलें जो वर्तमान तत्व को विधि में बदलता है।

Answer 7

रेडियो इनपुट अभी तक समर्थित नहीं है। वहाँ एक रेडियो इनपुट मूल्य एक्सेसर (चेक बॉक्स के समान होना चाहिए एक है, जहां यह सेट 'को चेक किया' attr यहाँ लेकिन मुझे कोई नहीं मिला)। इसलिए मैंने एक को लागू किया; आप इसे यहाँ देख सकते हैं ।

Comments

उन्होंने इसे बीटा 6 में जोड़ा: github.com/angular/angular/blob/master/… github.com/angular/angular/commit/e725542 github.com/angular/angular/commit/8th47aa3

— JimB

@JBB: दुर्भाग्य से यह प्रतीत होता है कि मूल निवासी शब्दार्थ अलग हैं ।

— कियारा ग्रोवस्त्र 5

Answer 8

[value] = "ng" का प्रयोग * ngFor भी Angular 2 और 4 में Reactive Forms के साथ काम करता है

<label *ngFor="let item of items">
    <input type="radio" formControlName="options" [value]="item">
    {{item}}
</label>`

Comments

एकल चयन कैसे करें ??

— बेल्टर

Answer 9

निम्नलिखित ने मेरा मुद्दा तय किया, कृपया formटैग के अंदर रेडियो इनपुट जोड़ने पर विचार करें और [value]मूल्य प्रदर्शित करने के लिए टैग का उपयोग करें ।

<form name="form" (ngSubmit)="">
    <div *ngFor="let item of options">
        <input [(ngModel)]="model.option_id" type="radio" name="options" [value]="item.id"> &nbsp; {{ item.name }}
    </div>
</form>

Answer 10

यहाँ एक समाधान है जो मेरे लिए काम करता है। इसमें रेडियो बटन बाध्यकारी है - लेकिन व्यावसायिक डेटा के लिए बाध्यकारी नहीं है, बल्कि इसके बजाय, रेडियो बटन की स्थिति के लिए बाध्य है। यह शायद नई परियोजनाओं के लिए सबसे अच्छा समाधान नहीं है, लेकिन मेरी परियोजना के लिए उपयुक्त है। मेरी परियोजना में एक अलग तकनीक में लिखा मौजूदा कोड का एक टन है जिसे मैं कोणीय में पोर्ट कर रहा हूं। पुराना कोड एक पैटर्न का अनुसरण करता है जिसमें कोड प्रत्येक रेडियो बटन की जांच करने में बहुत रुचि रखता है यह देखने के लिए कि क्या यह चयनित है। समाधान क्लिक हैंडलर समाधानों की भिन्नता है, जिनमें से कुछ स्टैक ओवरफ्लो पर पहले ही उल्लेख किए जा चुके हैं। इस समाधान का जोड़ा गया मूल्य हो सकता है:

1. पुराने कोड के पैटर्न के साथ काम करता है जिसे मुझे काम करना है।
2. मैंने क्लिक हैंडलर में "if" स्टेटमेंट की संख्या को कम करने और रेडियो बटन के किसी भी समूह को संभालने के लिए एक सहायक वर्ग बनाया।

इस समाधान में शामिल है

1. प्रत्येक रेडियो बटन के लिए एक अलग मॉडल का उपयोग करना।
2. रेडियो बटन के मॉडल के साथ "चेक" विशेषता सेट करना।
3. क्लिक किए गए रेडियो बटन के मॉडल को सहायक कक्षा में पास करना।
4. सहायक वर्ग सुनिश्चित करता है कि मॉडल अद्यतित हैं।
5. "सबमिट टाइम" पर यह पुराने कोड को रेडियो बटनों की स्थिति की जांच करने की अनुमति देता है, यह देखने के लिए कि कौन से मॉडल की जांच करके चुना गया है।

उदाहरण:

<input type="radio"
    [checked]="maleRadioButtonModel.selected"
    (click)="radioButtonGroupList.selectButton(maleRadioButtonModel)"

...

 <input type="radio"
    [checked]="femaleRadioButtonModel.selected"
    (click)="radioButtonGroupList.selectButton(femaleRadioButtonModel)"

...

जब उपयोगकर्ता एक रेडियो बटन पर क्लिक करता है, तो हेल्पर क्लास की चयन विधि लागू हो जाती है। यह उस रेडियो बटन के लिए मॉडल है जिसे क्लिक किया गया। हेल्पर वर्ग मॉडल में पारित किए गए बूलियन "चयनित" फ़ील्ड को सही पर सेट करता है, और अन्य सभी रेडियो बटन मॉडल के "चयनित" फ़ील्ड को गलत पर सेट करता है।

प्रारंभिककरण के दौरान घटक को समूह में सभी रेडियो बटन मॉडल की सूची के साथ सहायक वर्ग का एक उदाहरण बनाना होगा। उदाहरण में, "RadioButtonGroupList" सहायक श्रेणी का एक उदाहरण होगा जिसका कोड है:

 import {UIButtonControlModel} from "./ui-button-control.model";


 export class UIRadioButtonGroupListModel {

  private readonly buttonList : UIButtonControlModel[];
  private readonly debugName : string;


  constructor(buttonList : UIButtonControlModel[], debugName : string) {

    this.buttonList = buttonList;
    this.debugName = debugName;

    if (this.buttonList == null) {
      throw new Error("null buttonList");
    }

    if (this.buttonList.length < 2) {
      throw new Error("buttonList has less than 2 elements")
    }
  }



  public selectButton(buttonToSelect : UIButtonControlModel) : void {

    let foundButton : boolean = false;
    for(let i = 0; i < this.buttonList.length; i++) {
      let oneButton : UIButtonControlModel = this.buttonList[i];
      if (oneButton === buttonToSelect) {
        oneButton.selected = true;
        foundButton = true;
      } else {
        oneButton.selected = false;
      }

    }

    if (! foundButton) {
      throw new Error("button not found in buttonList");
    }
  }
}

Answer 11

कोणीय 8 रेडियो लिस्टिंग उदाहरण:

स्रोत लिंक

JSON प्रतिक्रिया

    [
            {
                "moduleId": 1,
                "moduleName": "Employee",
                "subModules":[
                    {
                        "subModuleId": 1,
                        "subModuleName": "Add Employee",
                        "selectedRightType": 1,
                    },{
                        "subModuleId": 2,
                        "subModuleName": "Update Employee",
                        "selectedRightType": 2,
                    },{
                        "subModuleId": 3,
                        "subModuleName": "Delete Employee",
                        "selectedRightType": 3,
                    }
                ]
            },  
            {
                "moduleId": 2,
                "moduleName": "Company",
                "subModules":[
                    {
                        "subModuleId": 4,
                        "subModuleName": "Add Company",
                        "selectedRightType": 1,
                    },{
                        "subModuleId": 5,
                        "subModuleName": "Update Company",
                        "selectedRightType": 2,
                    },{
                        "subModuleId": 6,
                        "subModuleName": "Delete Company",
                        "selectedRightType": 3,
                    }
                ]
            },  
            {
                "moduleId": 3,
                "moduleName": "Tasks",
                "subModules":[
                    {
                        "subModuleId": 7,
                        "subModuleName": "Add Task",
                        "selectedRightType": 1,
                    },{
                        "subModuleId": 8,
                        "subModuleName": "Update Task",
                        "selectedRightType": 2,
                    },{
                        "subModuleId": 9,
                        "subModuleName": "Delete Task",
                        "selectedRightType": 3,
                    }
                ]
            }
    ]

HTML टेम्पलेट

        <div *ngFor="let module of modules_object">
            <div>{{module.moduleName}}</div>
            <table width="100%">

                <thead>
                    <tr>
                        <th>Submodule</th>
                        <th>
                            <input type="radio" name="{{module.moduleName}}_head_radio" [(ngModel)]="module.selHeader" (change)="selAllColumn(module)" [value]="1"> Read Only
                        </th>
                        <th>
                            <input type="radio" name="{{module.moduleName}}_head_radio" [(ngModel)]="module.selHeader" (change)="selAllColumn(module)" [value]="2"> Read Write
                        </th>
                        <th>
                            <input type="radio" name="{{module.moduleName}}_head_radio" [(ngModel)]="module.selHeader" (change)="selAllColumn(module)" [value]="3"> No Access
                        </th>
                    </tr>
                </thead>

                <tbody>
                    <tr *ngFor="let sm of module.subModules">
                        <td>{{sm.subModuleName}}</td>
                        <td>
                            <input type="radio" [checked]="sm.selectedRightType == '1'" [(ngModel)]="sm.selectedRightType" name="{{sm.subModuleId}}_radio" [value]="1"> 
                        </td>
                        <td class="cl-left">
                            <input type="radio" [checked]="sm.selectedRightType == '2'" [(ngModel)]="sm.selectedRightType" name="{{sm.subModuleId}}_radio" [value]="2"> 
                        </td>
                        <td class="cl-left">
                            <input type="radio" [checked]="sm.selectedRightType == '3'" [(ngModel)]="sm.selectedRightType" name="{{sm.subModuleId}}_radio" [value]="3"> 
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

Answer 12

सरलतम समाधान और समाधान:

<input name="toRent" type="radio" (click)="setToRentControl(false)">
<input name="toRent" type="radio" (click)="setToRentControl(true)">

setToRentControl(value){
    this.vm.toRent.updateValue(value);
    alert(value); //true/false
}

Comments

आप इस मामले में शुरू से ही डिफ़ॉल्ट मान के लिए एक रेडियो बटन कैसे सेट करेंगे?

— एरिका

ऐसी स्थिति भी होगी जहां उपयोगकर्ता बार-बार पसंद बदलता है, हर बार हर चेक के लिए एक समारोह होगा,

— ब्लैकहॉक

Answer 13

मैंने लोड किए गए तत्वों पर सिर्फ एक क्लिक इवेंट का उपयोग करके और फ़ंक्शन "getSelection" फ़ंक्शन में चयन के मूल्य को पारित करके और मॉडल को अपडेट करके एक संस्करण बनाया है।

अपने टेम्पलेट में:

<ul>
     <li *ngFor="let p of price"><input type="radio" name="price"      (click)="getValue(price.value)" value="{{p}}" #price> {{p}} 
     </li>
</ul>

आपकी कक्षा:

export class App {

  price:string;

  price = ["1000", "2000", "3000"];

  constructor() {   }

  model = new SomeData(this.price);

  getValue(price){
    this.model.price = price;
  }
}

उदाहरण देखें: https://plnkr.co/edit/2Muje8yvWZVLL9OXqG0pW?p=info

Answer 14

यह उत्तर आपके उपयोग के मामले के आधार पर सबसे अच्छा नहीं हो सकता है, यह काम करता है। एक पुरुष और महिला चयन के लिए रेडियो बटन का उपयोग करने के बजाय, <select> </select>पूरी तरह से कार्यों का उपयोग करते हुए , बचत और संपादन दोनों के लिए।

<select formControlName="gender" name="gender" class="">
  <option value="M">Male</option>
  <option value="F">Female</option>
</select>

ऊपर के साथ FormGroup का उपयोग करते हुए संपादन के लिए उपरोक्त को ठीक करना चाहिए patchValue। बनाने के लिए, आप [(ngModel)]इसके बजाय उपयोग कर सकते हैंformControlName । अभी भी काम करता है।

प्लंबिंग कार्य रेडियो बटन एक के साथ शामिल है, मैंने इसके बजाय चयन के साथ जाना चुना। नेत्रहीन और UX- वार, यह सबसे अच्छा प्रतीत नहीं होता है, लेकिन एक डेवलपर के दृष्टिकोण से, यह एक टन आसान है।

Answer 15

रेडियो बटन परिवर्तन पर इन पंक्तियों के साथ संबंधित बटन का मूल्य मिलता है

<label class="radio-inline">
<input class="form-check-input" type="radio" [(ngModel)]="dog" name="cat"  checked (change)="onItemChange($event)" value="Dog" />Dog</label>
<label class="radio-inline">
<input class="form-check-input" type="radio" [(ngModel)]="cat" name="cat"   (change)="onItemChange($event)" value="Cat"  />Cat</label>

https://stackblitz.com/edit/angular-jpo2dm?embed=1&file=src/app/app.component.html

Answer 16

यहाँ कुछ कोड का उपयोग किया गया है जो कोणीय 7 के साथ काम करता है

(नोट: अतीत में मैंने कभी-कभी एंथनी ब्रेनेलिएर के उत्तर द्वारा प्रदान की गई जानकारी का उपयोग किया था, जिसकी मैं सराहना करता हूं। लेकिन, कम से कम कोणीय 7, इस भाग के लिए:

 [checked]="model.options==2"

मैं अनावश्यक पाया गया।)

यहाँ मेरे समाधान के तीन फायदे हैं:

1. सबसे अधिक अनुशंसित समाधान के अनुरूप। इसलिए यह नई परियोजनाओं के लिए अच्छा है।
2. इसके अलावा रेडियो बटन कोड फ्लेक्स / एक्शनस्क्रिप्ट कोड के समान है। यह व्यक्तिगत रूप से महत्वपूर्ण है क्योंकि मैं फ्लेक्स कोड को कोणीय में अनुवाद कर रहा हूं। फ्लेक्स / एक्शनस्क्रिप्ट कोड की तरह यह कोड को रेडियो बटन ऑब्जेक्ट पर जांच या अनचेक करने या यह पता लगाने की अनुमति देता है कि क्या रेडियो बटन चेक किया गया है।
3. अधिकांश समाधानों के विपरीत जो आप देखेंगे, यह बहुत ही वस्तु-आधारित है। एक फायदा संगठन है: यह एक साथ एक रेडियो बटन के डेटा बाइंडिंग क्षेत्रों को समूह करता है, जैसे कि चयनित, सक्षम, दृश्यमान और संभवतः अन्य।

उदाहरण HTML:

       <input type="radio" id="byAllRadioButton"
                 name="findByRadioButtonGroup"
                 [(ngModel)]="findByRadioButtonGroup.dataBindingValue"
                 [value]="byAllRadioButton.MY_DATA_BINDING_VALUE">         

      <input type="radio" id="byNameRadioButton"
                 name="findByRadioButtonGroup" 
                 [(ngModel)]="findByRadioButtonGroup.dataBindingValue"
                 [value]="byNameRadioButton.MY_DATA_BINDING_VALUE">

उदाहरण टाइपस्क्रिप्ट:

 findByRadioButtonGroup : UIRadioButtonGroupModel
    = new UIRadioButtonGroupModel("findByRadioButtonGroup",
                                  "byAllRadioButton_value",
                                  (groupValue : any) => this.handleCriteriaRadioButtonChange(groupValue)
                                  );

  byAllRadioButton : UIRadioButtonControlModel
    = new UIRadioButtonControlModel("byAllRadioButton",
    "byAllRadioButton_value",
    this.findByRadioButtonGroup) ;

  byNameRadioButton : UIRadioButtonControlModel
    = new UIRadioButtonControlModel("byNameRadioButton",
    "byNameRadioButton_value",
    this.findByRadioButtonGroup) ;



  private handleCriteriaRadioButtonChange = (groupValue : any) : void => {

    if ( this.byAllRadioButton.selected ) {

      // Do something

    } else if ( this.byNameRadioButton.selected ) {

      // Do something

    } else {
      throw new Error("No expected radio button selected");
    }
  };

दो वर्गों का उपयोग किया जाता है:

रेडियो बटन समूह कक्षा:

export class UIRadioButtonGroupModel {


  private _dataBindingValue : any;


  constructor(private readonly debugName : string,
              private readonly initialDataBindingValue : any = null,   // Can be null or unspecified
              private readonly notifyOfChangeHandler : Function = null       // Can be null or unspecified
  ) {

    this._dataBindingValue = initialDataBindingValue;
  }


  public get dataBindingValue() : any {

    return this._dataBindingValue;
  }


  public set dataBindingValue(val : any) {

    this._dataBindingValue = val;
    if (this.notifyOfChangeHandler != null) {
      MyAngularUtils.callLater(this.notifyOfChangeHandler, this._dataBindingValue);
    }
  }



  public unselectRadioButton(valueOfOneRadioButton : any) {

    //
    // Warning: This method probably never or almost never should be needed.
    // Setting the selected radio button to unselected probably should be avoided, since
    // the result will be that no radio button will be selected.  That is
    // typically not how radio buttons work.  But we allow it here.
    // Be careful in its use.
    //

    if (valueOfOneRadioButton == this._dataBindingValue) {
      console.warn("Setting radio button group value to null");
      this.dataBindingValue = null;
    }
  }

};

रेडियो बटन कक्षा

export class UIRadioButtonControlModel {


  public enabled : boolean = true;
  public visible : boolean = true;


  constructor(public readonly debugName : string,
              public readonly MY_DATA_BINDING_VALUE : any,
              private readonly group : UIRadioButtonGroupModel,
              ) {

  }


  public get selected() : boolean {

    return (this.group.dataBindingValue == this.MY_DATA_BINDING_VALUE);
  }


  public set selected(doSelectMe : boolean) {

    if (doSelectMe) {
      this.group.dataBindingValue = this.MY_DATA_BINDING_VALUE;
    } else {
      this.group.unselectRadioButton(this.MY_DATA_BINDING_VALUE);
    }
  }

}

Answer 17

यह सही समाधान नहीं हो सकता है, लेकिन यह भी एक विकल्प है आशा है कि यह किसी की मदद करेगा।

अब तक मुझे निम्न प्रकार से रेडियोबुटन (क्लिक) विधि का उपयोग करने का मूल्य मिल रहा था:

<input type="radio" name="options" #male (click)="onChange(male.value)">Male
<input type="radio" name="options" #female (click)="onChange(female.value)">Female

और .ts फ़ाइल में मैंने पाने के लिए पूर्वनिर्धारित चर का मान निर्धारित किया है onChange फ़ंक्शन ।

लेकिन खोज करने के बाद मैंने पाया कि मुझे अच्छी विधि अभी तक नहीं मिली है, लेकिन ऐसा लगता है कि यह एक अच्छा [(ng-model)]लिंक है जिसका उपयोग यहां करने के लिए किया गया है । यह RadioControlValueAccessorरेडियो के साथ-साथ चेकबॉक्स के लिए भी उपयोग कर रहा है। यहाँ इस विधि के लिए काम # plnkr # है यहाँ ।