RadioControlValueAccessor - Angular

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 {
  constructor(renderer: Renderer2, elementRef: ElementRef<any>, _registry: RadioControlRegistry, _injector: Injector): RadioControlValueAccessor;
  @Input() name: string;
  @Input() formControlName: string;
  @Input() value: any;
  fireUncheck(value: any): void;
}

constructor

RadioControlValueAccessor

@paramrendererRenderer2

@paramelementRefElementRef<any>

@param_registryRadioControlRegistry

@param_injectorInjector

@returnsRadioControlValueAccessor

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

fireUncheck

void

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

@paramvalueany

@returnsvoid

Description

Exported by

ReactiveFormsModule
FormsModule

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