Angular2 - Liên kết nút radio

Tôi muốn sử dụng nút radio trong một biểu mẫu bằng 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/>

Giá trị ban đầu của model.options là 1

khi trang được tải, nút radio đầu tiên không được chọn và các sửa đổi không được liên kết với mô hình

Bất kỳ ý tưởng ?

sử dụng [value] = "1" thay vì value = "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/>

Biên tập:

Theo đề xuất của thllbrg "Đối với 2.1+ góc sử dụng [(ngModel)]thay vì [(ng-model)]"

Lưu ý - ràng buộc nút radio hiện là một tính năng được hỗ trợ trong RC4 trở đi - hãy xem câu trả lời này

Ví dụ về nút radio sử dụng RadioControlValueAccessor tùy chỉnh tương tự như CheckboxControlValueAccessor ( Cập nhật với Angular 2 rc-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; }
}

Nguồn: https://github.com/angular2-school/angular2-radio-button

Bản demo trực tiếp của Plunker: http://plnkr.co/edit/rantye6An1iHfwsqGoE3q?p=preview

Cách giải quyết thủ công của tôi, bao gồm cập nhật thủ công model.optionskhi chọn nút radio mới:

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

Điều này Plunkerthể hiện điều trên, cũng như cách sử dụng một nút để thay đổi nút radio đã chọn - tức là, để chứng minh rằng liên kết dữ liệu là hai chiều:

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

Đây là cách tốt nhất để sử dụng các nút radio trong Angular2. Không cần phải sử dụng sự kiện (nhấp chuột) hoặc một RadioControlValueAccessor để thay đổi giá trị thuộc tính liên kết, việc đặt thuộc tính [đã kiểm tra] thực hiện một mẹo nhỏ.

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

Tôi đã xuất bản một ví dụ về việc sử dụng các nút radio: Angular 2: làm thế nào để tạo các nút radio từ enum và thêm liên kết hai chiều? Nó hoạt động từ ít nhất Angular 2 RC5.

Sự cố này được giải quyết trong phiên bản Angular 2.0.0-rc.4, tương ứng ở các dạng.

Bao gồm "@angular/forms": "0.2.0"trong package.json.

Sau đó, mở rộng bootstrap của bạn trong main. Phần liên quan:

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

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

Tôi có cái này trong .html và hoạt động hoàn hảo: value: {{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>

Tôi đang tìm phương pháp phù hợp để xử lý các nút radio đó, đây là ví dụ cho giải pháp tôi tìm thấy ở đây:

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

Lưu ý rằng onSelectionChange chuyển phần tử hiện tại cho phương thức.

Đầu vào radio dường như chưa được hỗ trợ. Nên có một accessor giá trị đầu vào đài phát thanh (tương tự như hộp kiểm của một , nơi nó đặt 'kiểm tra' attr đây ) nhưng tôi đã không tìm thấy bất kỳ. Vì vậy, tôi đã thực hiện một; bạn có thể kiểm tra nó ở đây .

[value] = "item" using * ngFor cũng hoạt động với Biểu mẫu phản ứng trong Angular 2 và 4

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

Sự cố sau đã khắc phục sự cố của tôi, vui lòng xem xét thêm đầu vào radio bên trong formthẻ và sử dụng [value]thẻ để hiển thị giá trị.

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

Đây là một giải pháp phù hợp với tôi. Nó liên quan đến ràng buộc nút radio - nhưng không ràng buộc với dữ liệu kinh doanh mà thay vào đó, ràng buộc với trạng thái của nút radio. Nó có lẽ KHÔNG phải là giải pháp tốt nhất cho các dự án mới, nhưng phù hợp với dự án của tôi. Dự án của tôi có rất nhiều mã hiện có được viết bằng một công nghệ khác mà tôi đang chuyển sang Angular. Mã cũ tuân theo một mô hình trong đó mã rất quan tâm đến việc kiểm tra từng nút radio để xem nó có phải là nút được chọn hay không. Giải pháp này là một biến thể của các giải pháp xử lý nhấp chuột, một số trong số đó đã được đề cập trên Stack Overflow. Giá trị gia tăng của giải pháp này có thể là:

1. Hoạt động với mẫu mã cũ mà tôi phải làm việc.
2. Tôi đã tạo một lớp trợ giúp để cố gắng giảm số lượng câu lệnh "if" trong trình xử lý nhấp chuột và xử lý bất kỳ nhóm nút radio nào.

Giải pháp này liên quan đến

1. Sử dụng một mô hình khác nhau cho mỗi nút radio.
2. Đặt thuộc tính "đã kiểm tra" với mô hình của nút radio.
3. Chuyển mô hình của nút radio đã nhấp vào lớp trợ giúp.
4. Lớp người trợ giúp đảm bảo rằng các mô hình được cập nhật.
5. Tại "thời gian gửi", điều này cho phép mã cũ kiểm tra trạng thái của các nút radio để xem cái nào được chọn bằng cách kiểm tra các mô hình.

Thí dụ:

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

...

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

...

Khi người dùng nhấp vào một nút radio, phương thức selectButton của lớp trợ giúp sẽ được gọi. Nó được chuyển sang mô hình cho nút radio đã được nhấp. Lớp trợ giúp đặt trường boolean "đã chọn" của mô hình được truyền vào thành true và đặt trường "đã chọn" của tất cả các mô hình nút radio khác thành false.

Trong quá trình khởi tạo, thành phần phải xây dựng một thể hiện của lớp trợ giúp với danh sách tất cả các mô hình nút radio trong nhóm. Trong ví dụ, "radioButtonGroupList" sẽ là một phiên bản của lớp trợ giúp có mã là:

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

Ví dụ về danh sách radio Angular 8:

Liên kết nguồn

Phản hồi 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,
                    }
                ]
            }
    ]

Mẫu 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>

Giải pháp và cách giải quyết đơn giản nhất:

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

Tôi đã tạo phiên bản bằng cách chỉ sử dụng một sự kiện nhấp chuột vào các phần tử được tải và chuyển giá trị của vùng chọn vào hàm "getSelection" và cập nhật mô hình.

Trong mẫu của bạn:

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

Lớp của bạn:

export class App {

  price:string;

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

  constructor() {   }

  model = new SomeData(this.price);

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

Xem ví dụ: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

Nhiều như câu trả lời này có thể không phải là tốt nhất tùy thuộc vào trường hợp sử dụng của bạn, nó hoạt động. Thay vì sử dụng nút Radio cho lựa chọn Nam và Nữ, sử dụng các <select> </select>tác phẩm hoàn hảo, cho cả việc lưu và chỉnh sửa.

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

Ở trên sẽ làm tốt, để chỉnh sửa bằng FormGroup với patchValue. Để tạo, bạn có thể sử dụng [(ngModel)]thay vì formControlName. Vẫn hoạt động.

Công việc sửa ống nước liên quan đến nút radio, thay vào đó tôi đã chọn đi với nút chọn. Về mặt trực quan và UX, nó có vẻ không phải là tốt nhất, nhưng từ quan điểm của nhà phát triển, nó dễ dàng hơn rất nhiều.

Thay đổi nút trên Radio lấy giá trị của các nút tương ứng với các dòng này

<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

Đây là một số mã tôi sử dụng hoạt động với Angular 7

(Lưu ý: Trong quá khứ, đôi khi tôi sử dụng thông tin được cung cấp bởi câu trả lời của Anthony Brenelière, điều mà tôi đánh giá cao. Nhưng, ít nhất đối với Angular 7, phần này:

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

Tôi thấy là không cần thiết.)

Giải pháp của tôi ở đây có ba ưu điểm:

1. Phù hợp với các giải pháp được khuyến nghị phổ biến nhất. Vì vậy, nó là tốt cho các dự án mới.
2. Cũng cho phép mã nút radio tương tự như mã Flex / ActionScript. Điều này rất quan trọng vì tôi đang dịch mã Flex sang Angular. Giống như mã Flex / ActionScript, nó cho phép mã hoạt động trên một đối tượng nút radio để kiểm tra hoặc bỏ chọn hoặc tìm hiểu xem nút radio có được chọn hay không.
3. Không giống như hầu hết các giải pháp bạn sẽ thấy, nó rất dựa trên đối tượng. Một ưu điểm là tính tổ chức: Nó nhóm các trường liên kết dữ liệu của một nút radio lại với nhau, chẳng hạn như đã chọn, đã bật, hiển thị và có thể là những trường khác.

HTML mẫu:

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

TypeScript mẫu:

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

Hai lớp được sử dụng:

Nhóm nút radio:

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

};

Lớp nút radio

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

}

Đây có thể không phải là giải pháp chính xác nhưng đây cũng là lựa chọn hy vọng nó sẽ giúp ích cho ai đó.

Cho đến bây giờ tôi đã nhận được giá trị của radioButtons bằng cách sử dụng phương thức (nhấp chuột) như sau:

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

và trong tệp .ts, tôi đã đặt giá trị của biến được xác định trước thành giá trị getter của onChangehàm.

Nhưng sau khi tìm kiếm, tôi đã tìm thấy phương pháp tốt, tôi chưa thử nhưng có vẻ như phương pháp này tốt bằng cách sử dụng [(ng-model)]liên kết ở đây là github ở đây . điều này cũng đang sử dụng RadioControlValueAccessorcho radio cũng như hộp kiểm. đây là # plnkr # làm việc cho phương pháp này ở đây .