Ecco del codice che uso che funziona con Angular 7
(Nota: in passato a volte ho utilizzato le informazioni fornite dalla risposta di Anthony Brenelière, che apprezzo. Ma, almeno per Angular 7, questa parte:
[checked]="model.options==2"
Ho scoperto che non è necessario.)
La mia soluzione qui ha tre vantaggi:
- Coerentemente con le soluzioni più comunemente consigliate. Quindi è buono per nuovi progetti.
- Inoltre, consente al codice del pulsante di opzione di essere simile al codice Flex / ActionScript. Questo è personalmente importante perché sto traducendo il codice Flex in Angular. Come il codice Flex / ActionScript, consente al codice di lavorare su un oggetto pulsante di opzione per selezionare o deselezionare o scoprire se un pulsante di opzione è selezionato.
- A differenza della maggior parte delle soluzioni che vedrai, è molto basato sugli oggetti. Un vantaggio è l'organizzazione: raggruppa i campi di associazione dati di un pulsante di opzione, come selezionato, abilitato, visibile e possibilmente altri.
HTML di esempio:
<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 di esempio:
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");
}
};
Vengono utilizzate due classi:
Classe gruppo pulsanti di opzione:
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;
}
}
};
Classe pulsante di opzione
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);
}
}
}
