RadioControlValueAccessor

Stable Directive

What it does

Writes radio control values and listens to radio control changes.

Used by NgModel, FormControlDirective, and FormControlName to keep the view synced with the FormControl model.

How to use

If you have imported the FormsModule or the ReactiveFormsModule, this value accessor will be active on any radio control that has a form directive. You do not need to add a special selector to activate it.

How to use radio buttons with form directives

To use radio buttons in a template-driven form, you'll want to ensure that radio buttons in the same group have the same name attribute. Radio buttons with different name attributes do not affect each other.

import {Component} from '@angular/core';

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm">
      <input type="radio" value="beef" name="food" [(ngModel)]="myFood"> Beef
      <input type="radio" value="lamb" name="food" [(ngModel)]="myFood"> Lamb
      <input type="radio" value="fish" name="food" [(ngModel)]="myFood"> Fish
    </form>

    <p>Form value: {{ f.value | json }}</p>  <!-- {food: 'lamb' } -->
    <p>myFood value: {{ myFood }}</p>  <!-- 'lamb' -->
  `,
})
export class RadioButtonComp {
  myFood = 'lamb';
}

When using radio buttons in a reactive form, radio buttons in the same group should have the same formControlName. You can also add a name attribute, but it's 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' } -->
  `,
})
export class ReactiveRadioButtonComp {
  form = new FormGroup({
    food: new FormControl('lamb'),
  });
}

• npm package: @angular/forms

Class Overview

class RadioControlValueAccessor implements ControlValueAccessor, 
  constructor(_renderer: Renderer, _elementRef: ElementRef, _registry: RadioControlRegistry, _injector: Injector)
  
  
  onChange : () => {}
  onTouched : () => {}
  name : string
  formControlName : string
  value : any
  ngOnInit() : void
  ngOnDestroy() : void
  writeValue(value: any) : void
  registerOnChange(fn: (_: any) => {}) : void
  fireUncheck(value: any) : void
  registerOnTouched(fn: () => {}) : void
  setDisabledState(isDisabled: boolean) : void
}

Selectors

input[type=radio][formControlName]

input[type=radio][formControl]

input[type=radio][ngModel]

Class Description

Constructor

constructor(_renderer: Renderer, _elementRef: ElementRef, _registry: RadioControlRegistry, _injector: Injector)

Class Details

onChange : () => {}

onTouched : () => {}

name : string

formControlName : string

value : any

ngOnInit() : void

ngOnDestroy() : void

writeValue(value: any) : void

registerOnChange(fn: (_: any) => {}) : void

fireUncheck(value: any) : void

registerOnTouched(fn: () => {}) : void

setDisabledState(isDisabled: boolean) : void

exported from @angular/forms/index, defined in @angular/forms/src/directives/radio_control_value_accessor.ts