RadioControlValueAccessor

directive

npm Package	@angular/forms
Module	import { RadioControlValueAccessor } from '@angular/forms';
Source	forms/src/directives/radio_control_value_accessor.ts

Overview

@Directive({
    selector: 'input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]',
    host: { '(change)': 'onChange()', '(blur)': 'onTouched()' },
    providers: [RADIO_VALUE_ACCESSOR]
})
class RadioControlValueAccessor implements ControlValueAccessor, OnDestroy, OnInit {
  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
}

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

Selectors

input[type=radio][formControlName] input[type=radio][formControl] input[type=radio][ngModel]

Inputs

Constructor

Members

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