Angular2 - Radyo Düğmesi Bağlama

Angular 2 kullanan bir formda radyo düğmesini kullanmak istiyorum

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 başlangıç ​​değeri 1

sayfa yüklendiğinde ilk radyo düğmesi kontrol edilmez ve değişiklikler modele bağlanmaz

Herhangi bir fikir ?

Kullanım = "1" [değer] yerine değeri = "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/>

Düzenle:

Thllbrg tarafından önerildiği gibi "Açısal 2.1+ kullanım [(ngModel)]için [(ng-model)]"

Not - radyo düğmesi bağlama artık RC4'ten itibaren desteklenen bir özelliktir - bu yanıta bakın

CheckboxControlValueAccessor'a benzer özel RadioControlValueAccessor kullanan radyo düğmesi örneği ( Angular 2 rc-1 ile güncellendi )

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; }
}

Kaynak: https://github.com/angular2-school/angular2-radio-button

Plunker canlı demosu: http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview

model.optionsYeni bir radyo düğmesi seçildiğinde manuel olarak güncellemeyi içeren manuel çözümüm :

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' };
}

Bu Plunker, yukarıdakilerin yanı sıra seçilen radyo düğmesini değiştirmek için bir düğmenin nasıl kullanılacağını gösterir - yani, veri bağlamanın iki yönlü olduğunu kanıtlamak için:

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

İşte Angular2'de radyo düğmelerini kullanmanın en iyi yolu. Bağlı özellik değerini değiştirmek için (tıklama) olayını veya bir RadioControlValueAccessor kullanmaya gerek yoktur, [kontrol edildi] özelliğinin ayarlanması hile yapar.

<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/>

Radyo düğmelerini kullanmanın bir örneğini yayınladım: Açısal 2: numaralandırmadan radyo düğmeleri nasıl oluşturulur ve iki yönlü bağlama nasıl eklenir? En az Angular 2 RC5'ten çalışır.

Bu Sorun, Angular 2.0.0-rc.4 sürümünde sırasıyla formlarda çözülmüştür.

"@angular/forms": "0.2.0"Package.json'a ekleyin .

Ardından önyüklemenizi esas olarak genişletin. İlgili bölüm:

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

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

Bunu .html biçiminde aldım ve mükemmel çalışıyor: değer: {{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>

Bu radyo düğmelerini kullanmak için doğru yöntemi arıyordum, burada bulduğum bir çözüm için bir örnek:

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

Geçerli öğeyi yönteme ileten onSelectionChange'e dikkat edin .

Radyo girişi henüz desteklenmiyor gibi görünüyor. (Onay kutusu işaretli benzer bir radyo giriş değeri erişimci olmamalıdır biri o özn 'işaretli' ayarlar burada ama herhangi bulamadık). Ben de bir tane uyguladım; Eğer bunu kontrol edebilirsiniz burada .

[değer] = * ngFor kullanan "öğe", Açısal 2 ve 4'teki Reaktif Formlarla da çalışır

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

Aşağıdaki sorunumu çözdü, lütfen formetiketin içine radyo girişi eklemeyi düşünün [value]ve değeri görüntülemek için etiketi kullanın.

<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>

İşte benim için çalışan bir çözüm. Radyo düğmesi bağlamayı içerir - ancak iş verilerini bağlamaz, bunun yerine radyo düğmesinin durumuna bağlanır. Muhtemelen yeni projeler için en iyi çözüm DEĞİL, ancak projem için uygundur. Projemde, Angular'a taşıdığım farklı bir teknolojide yazılmış bir ton mevcut kod var. Eski kod, kodun seçili olup olmadığını görmek için her bir radyo düğmesini incelemeyle çok ilgilendiği bir modeli izler. Çözüm, bazıları Stack Overflow'da bahsedilmiş olan tıklama işleyici çözümlerinin bir varyasyonudur. Bu çözümün katma değeri şunlar olabilir:

1. Üzerinde çalışmam gereken eski kod kalıbı ile çalışıyor.
2. Tıklama işleyicisindeki "if" ifadelerinin sayısını azaltmaya ve herhangi bir radyo düğmesi grubunu işlemeye çalışmak için bir yardımcı sınıf oluşturdum.

Bu çözüm şunları içerir:

1. Her radyo düğmesi için farklı bir model kullanmak.
2. Radyo düğmesinin modeliyle "işaretli" özelliğini ayarlama.
3. Tıklanan radyo düğmesinin modelini yardımcı sınıfa geçirme.
4. Yardımcı sınıf, modellerin güncel olmasını sağlar.
5. "Gönderme zamanında" bu, eski kodun, modelleri inceleyerek hangisinin seçildiğini görmek için radyo düğmelerinin durumunu incelemesine izin verir.

Misal:

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

...

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

...

Kullanıcı bir radyo düğmesini tıkladığında, yardımcı sınıfın selectButton yöntemi çağrılır. Tıklanan radyo düğmesinin modeline geçilir. Yardımcı sınıf, modelde aktarılan "seçilmiş" boole alanını doğru olarak ayarlar ve diğer tüm radyo düğmesi modellerinin "seçilmiş" alanını yanlış olarak ayarlar.

Başlatma sırasında bileşen, gruptaki tüm radyo düğmesi modellerinin bir listesi ile yardımcı sınıfın bir örneğini oluşturmalıdır. Örnekte, "radioButtonGroupList", kodu şu olan yardımcı sınıfın bir örneği olacaktır:

 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");
    }
  }
}

Angular 8 Radyo Listeleme Örneği:

Kaynak Bağlantısı

JSON Yanıtı

    [
            {
                "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 Şablonu

        <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>

En basit çözüm ve geçici çözüm:

<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
}

Yüklenen öğelerde sadece bir tıklama olayını kullanarak ve seçimin değerini "getSelection" işlevine aktararak ve modeli güncelleyerek bir sürüm oluşturdum.

Şablonunuzda:

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

Senin sınıfın:

export class App {

  price:string;

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

  constructor() {   }

  model = new SomeData(this.price);

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

Örneğe bakın: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

Bu cevap, kullanım durumunuza bağlı olarak en iyi cevap olmayabilir, ancak işe yarıyor. Erkek ve Kadın seçimi için Radyo düğmesini kullanmak yerine <select> </select>, hem kaydetme hem de düzenleme için işleri mükemmel bir şekilde kullanmak .

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

Yukarıdakiler, FormGroup ile düzenleme yapmak için gayet iyi olmalı patchValue. Oluşturmak [(ngModel)]için formControlName,. Hala çalışıyor.

Birinci radyo düğmesiyle ilgili sıhhi tesisat işi, bunun yerine seçimle gitmeyi seçtim. Görsel ve kullanıcı deneyimi açısından en iyisi gibi görünmüyor, ancak geliştiricinin bakış açısından çok daha kolay.

Radyo düğmesi değiştirildiğinde, ilgili düğmelerin değerini bu çizgilerle alın

<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

İşte Angular 7 ile çalışan kullandığım bazı kodlar

(Not: Geçmişte bazen takdir ettiğim Anthony Brenelière'nin cevabının sağladığı bilgileri kullandım. Ama en azından Angular 7 için bu kısım:

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

Gereksiz buldum.)

Buradaki çözümümün üç avantajı var:

1. En yaygın olarak önerilen çözümlerle tutarlı. Bu yüzden yeni projeler için iyidir.
2. Ayrıca radyo düğmesi kodunun Flex / ActionScript koduna benzer olmasına izin verir. Bu kişisel olarak önemlidir çünkü Flex kodunu Angular'a çeviriyorum. Flex / ActionScript kodu gibi, kodun bir radyo düğmesinin işaretli olup olmadığını kontrol etmek veya işaretini kaldırmak veya bulmak için bir radyo düğmesi nesnesi üzerinde çalışmasına izin verir.
3. Göreceğiniz çoğu çözümün aksine, çok nesne tabanlıdır. Bir avantajı organizasyondur: Seçilmiş, etkinleştirilmiş, görünür ve muhtemelen diğerleri gibi bir radyo düğmesinin veri bağlama alanlarını bir arada gruplandırır.

Örnek 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">

Örnek TypeScript:

 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");
    }
  };

İki sınıf kullanılır:

Radyo Düğmesi Grup Sınıfı:

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;
    }
  }

};

Radyo Düğmesi Sınıfı

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);
    }
  }

}

Bu doğru çözüm olmayabilir, ancak bu aynı zamanda birisine yardım edeceğini ummak da bir seçenek.

Şimdiye kadar, aşağıdaki gibi (tıklama) yöntemini kullanarak radioButtons değerini alıyordum:

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

ve .ts dosyasında önceden tanımlanmış değişkenin değerini onChangeişlevin alıcı değeri olarak ayarladım .

Ama aradıktan sonra henüz denemediğim iyi bir yöntem buldum, ancak bu [(ng-model)]bağlantıyı kullanmak iyi görünüyor , burada github için burada . bu hem RadioControlValueAccessorradyo hem de onay kutusu için kullanılıyor. burada bu yöntem için çalışan # plnkr # var .