Angular2 - Optionsfeldbindung

Ich möchte das Optionsfeld in einem Formular mit Angular 2 verwenden

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

Der Anfangswert von model.options ist 1

Wenn die Seite geladen wird, wird das erste Optionsfeld nicht aktiviert und die Änderungen werden nicht an das Modell gebunden

Irgendeine Idee ?

benutze [value] = "1" anstelle von 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/>

Bearbeiten:

Wie von thllbrg vorgeschlagen "Für Winkel 2.1+ [(ngModel)]anstelle von [(ng-model)]"

Hinweis - Optionsfeld Bindung wird nun eine unterstützte Funktion in RC4 ab - sehen Sie diese Antwort

Beispiel für ein Optionsfeld mit einem benutzerdefinierten RadioControlValueAccessor ähnlich dem CheckboxControlValueAccessor ( aktualisiert mit 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; }
}

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

Plunker Live-Demo: http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview

Meine manuelle Problemumgehung, bei der manuell aktualisiert wird, model.optionswenn ein neues Optionsfeld ausgewählt wird:

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

Dies Plunkerzeigt das oben Genannte sowie die Verwendung einer Schaltfläche zum Ändern des ausgewählten Optionsfelds, dh um zu beweisen, dass die Datenbindung in beide Richtungen erfolgt:

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

Hier ist die beste Möglichkeit, Optionsfelder in Angular2 zu verwenden. Es ist nicht erforderlich, das (Klick-) Ereignis oder einen RadioControlValueAccessor zu verwenden, um den Wert der gebundenen Eigenschaft zu ändern. Das Festlegen der Eigenschaft [checked] reicht aus.

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

Ich habe ein Beispiel für die Verwendung von Optionsfeldern veröffentlicht: Winkel 2: Wie erstelle ich Optionsfelder aus Enum und füge eine bidirektionale Bindung hinzu? Es funktioniert mit mindestens Angular 2 RC5.

Dieses Problem wurde in Version Angular 2.0.0-rc.4 bzw. in Formularen behoben.

Fügen Sie "@angular/forms": "0.2.0"in package.json.

Dann erweitern Sie Ihren Bootstrap in main. Relevanter Teil:

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

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

Ich habe dies in .html und funktioniert perfekt: Wert: {{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>

Ich habe nach der richtigen Methode gesucht, um mit diesen Optionsfeldern umzugehen. Dies ist ein Beispiel für eine Lösung, die ich hier gefunden habe:

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

Beachten Sie den onSelectionChange , der das aktuelle Element an die Methode übergibt.

Radioeingang scheint noch nicht unterstützt zu werden. Es sollte ein Funkeingangswert Accessor (ähnlich Checkbox ist sein ein , wo er setzt ‚geprüft‘ attr hier ) , aber ich habe keine gefunden. Also habe ich eine implementiert; Sie können es hier überprüfen .

[value] = "item" mit * ngFor funktioniert auch mit reaktiven Formen in Winkel 2 und 4

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

Im Folgenden wurde mein Problem behoben. Fügen Sie dem formTag möglicherweise einen Radioeingang hinzu und verwenden Sie das [value]Tag, um den Wert anzuzeigen.

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

Hier ist eine Lösung, die für mich funktioniert. Es handelt sich um eine Optionsfeldbindung - jedoch nicht um eine Bindung an Geschäftsdaten, sondern um eine Bindung an den Status des Optionsfelds. Es ist wahrscheinlich NICHT die beste Lösung für neue Projekte, aber für mein Projekt geeignet. In meinem Projekt ist eine Menge vorhandener Code in einer anderen Technologie geschrieben, die ich auf Angular portiere. Der alte Code folgt einem Muster, bei dem der Code sehr daran interessiert ist, jedes Optionsfeld zu untersuchen, um festzustellen, ob es das ausgewählte ist. Die Lösung ist eine Variation der Click-Handler-Lösungen, von denen einige bereits in Stack Overflow erwähnt wurden. Der Mehrwert dieser Lösung kann sein:

1. Arbeitet mit dem Muster des alten Codes, mit dem ich arbeiten muss.
2. Ich habe eine Hilfsklasse erstellt, um zu versuchen, die Anzahl der "if" -Anweisungen im Click-Handler zu reduzieren und eine beliebige Gruppe von Optionsfeldern zu verarbeiten.

Diese Lösung beinhaltet

1. Verwenden eines anderen Modells für jedes Optionsfeld.
2. Festlegen des Attributs "markiert" mit dem Modell des Optionsfelds.
3. Übergeben des Modells des angeklickten Optionsfelds an die Hilfsklasse.
4. Die Helferklasse stellt sicher, dass die Modelle auf dem neuesten Stand sind.
5. Bei "Übermittlungszeit" kann der alte Code den Status der Optionsfelder überprüfen, um festzustellen, welcher ausgewählt wurde, indem die Modelle überprüft werden.

Beispiel:

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

...

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

...

Wenn der Benutzer auf ein Optionsfeld klickt, wird die selectButton-Methode der Hilfsklasse aufgerufen. Es wird das Modell für das Optionsfeld übergeben, auf das geklickt wurde. Die Hilfsklasse setzt das boolesche "ausgewählte" Feld des übergebenen Modells auf "true" und das "ausgewählte" Feld aller anderen Optionsfeldmodelle auf "false".

Während der Initialisierung muss die Komponente eine Instanz der Hilfsklasse mit einer Liste aller Optionsfeldmodelle in der Gruppe erstellen. Im Beispiel wäre "radioButtonGroupList" eine Instanz der Hilfsklasse, deren Code lautet:

 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 Radio Listing Beispiel:

Quelle Link -

JSON-Antwort

    [
            {
                "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-Vorlage

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

Einfachste Lösung und Problemumgehung:

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

Ich habe eine Version erstellt, indem ich nur ein Klickereignis auf die geladenen Elemente verwendet und den Wert der Auswahl an die Funktion "getSelection" übergeben und das Modell aktualisiert habe.

In Ihrer Vorlage:

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

Deine Klasse:

export class App {

  price:string;

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

  constructor() {   }

  model = new SomeData(this.price);

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

Siehe Beispiel: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

So sehr diese Antwort je nach Anwendungsfall möglicherweise nicht die beste ist, funktioniert sie. Anstatt das Optionsfeld für eine Auswahl für Männer und Frauen zu verwenden, <select> </select>funktioniert die Funktion perfekt, sowohl zum Speichern als auch zum Bearbeiten.

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

Das Obige sollte für die Bearbeitung mit FormGroup mit gut funktionieren patchValue. Zum Erstellen können Sie [(ngModel)]anstelle von verwenden formControlName. Funktioniert noch.

Bei der Installation des Optionsfelds habe ich mich stattdessen für die Auswahl entschieden. Optisch und UX-weise scheint es nicht das Beste zu sein, aber vom Standpunkt eines Entwicklers aus ist es eine Menge einfacher.

Beim Ändern des Optionsfelds erhalten Sie den Wert der jeweiligen Schaltflächen mit diesen Zeilen

<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

Hier ist ein Code, den ich verwende und der mit Angular 7 funktioniert

(Hinweis: In der Vergangenheit habe ich manchmal Informationen aus der Antwort von Anthony Brenelière verwendet, die ich sehr schätze. Aber zumindest für Angular 7 ist dieser Teil:

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

Ich fand es unnötig.)

Meine Lösung hier hat drei Vorteile:

1. In Übereinstimmung mit den am häufigsten empfohlenen Lösungen. Es ist also gut für neue Projekte.
2. Ermöglicht außerdem, dass der Optionsfeldcode dem Flex / ActionScript-Code ähnelt. Dies ist persönlich wichtig, da ich Flex-Code in Angular übersetze. Wie Flex / ActionScript-Code ermöglicht es Code, an einem Optionsfeldobjekt zu arbeiten, um zu überprüfen oder zu deaktivieren oder herauszufinden, ob ein Optionsfeld aktiviert ist.
3. Im Gegensatz zu den meisten Lösungen, die Sie sehen werden, ist es sehr objektbasiert. Ein Vorteil ist die Organisation: Sie gruppiert Datenbindungsfelder eines Optionsfelds, z. B. ausgewählt, aktiviert, sichtbar und möglicherweise andere.

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

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

Es werden zwei Klassen verwendet:

Optionsfeld Gruppenklasse:

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

};

Optionsfeldklasse

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

}

Dies ist möglicherweise nicht die richtige Lösung, aber dies ist auch eine Option, die hoffentlich jemandem helfen wird.

Bis jetzt hatte ich den Wert von radioButtons mit der (Klick-) Methode wie folgt erhalten:

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

und in der .ts-Datei habe ich den Wert der vordefinierten Variablen auf den Getter-Wert der onChangeFunktion gesetzt.

Aber nach der Suche fand ich gute Methode i noch have't versucht , aber es scheint dies eine gut mit [(ng-model)]Link hier ist GitHub hier . Dies wird sowohl RadioControlValueAccessorfür das Radio als auch für das Kontrollkästchen verwendet. hier ist die Arbeit # plnkr # für diese Methode hier .