@angular/forms

RadioControlValueAccessor

directive

The ControlValueAccessor for writing radio control values and listening to radio control changes. The value accessor is used by the FormControlDirective, FormControlName, and NgModel directives.

API

  
    class RadioControlValueAccessor extends BuiltInControlValueAccessor implements ControlValueAccessor ,OnDestroy ,OnInit {}

onChange

() => void

The registered callback function called when a change event occurs on the input element. Note: we declare onChange here (also used as host listener) as a function with no arguments to override the onChange function (which expects 1 argument) in the parent BaseControlValueAccessor class.

name

string

Tracks the name of the radio input element.

formControlName

string

Tracks the name of the FormControl bound to the directive. The name corresponds to a key in the parent FormGroup or FormArray.

value

any

Tracks the value of the radio input element

ngOnInit

void

@returnsvoid

ngOnDestroy

void

@returnsvoid

writeValue

void

Sets the "checked" property value on the radio input element.

@paramvalueany

@returnsvoid

registerOnChange

void

Registers a function called when the control value changes.

@paramfn(_: any) => {}

@returnsvoid

setDisabledState

void

@paramisDisabledboolean

@returnsvoid

fireUncheck

void

Sets the "value" on the radio input element and unchecks it.

@paramvalueany

@returnsvoid

onTouched

() => void

The registered callback function called when a blur event occurs on the input element.

setProperty

void

Helper method that sets a property on a target element using the current Renderer implementation.

@paramkeystring

@paramvalueany

@returnsvoid

registerOnTouched

void

Registers a function called when the control is touched.

@paramfn() => void

@returnsvoid

Description

Exported by

Usage Notes

Using radio buttons with reactive form directives

The follow example shows how to use radio buttons in a reactive form. When using radio buttons in a reactive form, radio buttons in the same group should have the same formControlName. Providing a name attribute is optional.

          import {Component} from '@angular/core';import {FormControl, FormGroup} from '@angular/forms';@Component({  selector: 'example-app',  template: `    <form [formGroup]="form">      <input type="radio" formControlName="food" value="beef" /> Beef      <input type="radio" formControlName="food" value="lamb" /> Lamb      <input type="radio" formControlName="food" value="fish" /> Fish    </form>    <p>Form value: {{ form.value | json }}</p>    <!-- {food: 'lamb' } -->  `,  standalone: false,})export class ReactiveRadioButtonComp {  form = new FormGroup({    food: new FormControl('lamb'),  });}