forms - group - set checked radio angular 2




Angular2-Vinculação de botão de opção (11)

Eu quero usar o botão de opção em um formulário usando 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/>

O valor inicial de model.options é 1

quando a página é carregada, o primeiro botão de opção não é verificado e as modificações não são vinculadas ao modelo

Qualquer ideia ?


A entrada de rádio ainda não parece ser suportada. Deveria haver um acessador de valor de entrada de rádio (semelhante ao da caixa de seleção, onde ele define o atributo 'marcado' here ), mas não encontrei nenhum. Então eu implementei um; você pode conferir here .


Aqui está a melhor maneira de usar os botões de opção no Angular2. Não há necessidade de usar o evento (clique) ou um RadioControlValueAccessor para alterar o valor da propriedade vinculada, definindo a propriedade [marcada] faz o truque.

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

Publiquei um exemplo de uso de botões de opção: Angular 2: como criar botões de opção a partir de enum e adicionar ligação bidirecional? Funciona a partir de pelo menos Angular 2 RC5.


Aqui está uma solução que funciona para mim. Envolve a ligação do botão de opção - mas não a ligação aos dados corporativos, mas a ligação ao estado do botão de opção. Provavelmente NÃO é a melhor solução para novos projetos, mas é apropriada para o meu projeto. Meu projeto tem uma tonelada de código existente escrito em uma tecnologia diferente que estou portando para o Angular. O código antigo segue um padrão no qual o código está muito interessado em examinar cada botão de opção para ver se é o selecionado. A solução é uma variação das soluções do manipulador de cliques, algumas das quais já foram mencionadas no . O valor agregado desta solução pode ser:

  1. Funciona com o padrão de código antigo com o qual tenho que trabalhar.
  2. Criei uma classe auxiliar para tentar reduzir o número de instruções "if" no manipulador de cliques e manipular qualquer grupo de botões de opção.

Esta solução envolve

  1. Usando um modelo diferente para cada botão de opção.
  2. Configurando o atributo "marcado" com o modelo do botão de opção.
  3. Passando o modelo do botão de opção clicado para a classe auxiliar.
  4. A classe auxiliar garante que os modelos estejam atualizados.
  5. No "horário de envio", isso permite que o código antigo examine o estado dos botões de opção para ver qual deles é selecionado examinando os modelos.

Exemplo:

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

...

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

...

Quando o usuário clica em um botão de opção, o método selectButton da classe auxiliar é chamado. É passado o modelo para o botão de opção que foi clicado. A classe auxiliar define o campo booleano "selecionado" do modelo passado em como true e define o campo "selecionado" de todos os outros modelos de botão de opção como false.

Durante a inicialização, o componente deve construir uma instância da classe auxiliar com uma lista de todos os modelos de botão de opção no grupo. No exemplo, "radioButtonGroupList" seria uma instância da classe auxiliar cujo código é:

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

Esta pode não ser a solução correta, mas esta também é uma opção, espero que ajude alguém.

Até agora eu estava obtendo o valor de radioButtons usando o método (clique) da seguinte maneira:

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

e no arquivo .ts eu configurei o valor da variável predefinida para obter o valor getter da função onChange .

Mas depois de pesquisar, encontrei um bom método que ainda não tentei, mas parece que este é bom usando o link [(ng-model)] aqui para o github https://github.com/angular2-school/angular2-radio-button . isso está usando RadioControlValueAccessor para o rádio e também a caixa de seleção. aqui está o # plnkr # de trabalho para esse método http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview .


Eu criei uma versão usando apenas um evento click nos elementos carregados e passando o valor da seleção para a função "getSelection" e atualizando o modelo.

No seu modelo:

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

Sua classe:

export class App {

  price:string;

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

  constructor() {   }

  model = new SomeData(this.price);

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

Veja o exemplo: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info


Eu estava procurando o método certo para lidar com esses botões de opção. Aqui está um exemplo de solução que encontrei aqui:

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

Observe o onSelectionChange que passa o elemento atual para o método


Nota - a ligação de botões de opção agora é um recurso suportado no RC4 em diante.

Exemplo de botão de opção usando RadioControlValueAccessor personalizado semelhante a CheckboxControlValueAccessor ( atualizado com 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; }
}

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

Demonstração ao vivo do Plunker: http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview


O seguinte problema foi corrigido, considere adicionar entrada de rádio dentro da tag de form e use a tag [value] para exibir o valor.

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

Solução e solução mais simples:

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

[value] = "item" usando * ngFor também funciona com formas reativas nos angulares 2 e 4

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

Exemplo de listagem de rádio angular 8:

Link de origem

Resposta 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, } ] } ] 

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




angular