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.

NgModules

Selectors

Properties

Property Description
onChange: () => { }

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

onTouched: () => { }

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

@Input()name: string

Tracks the name of the radio input element.

@Input()formControlName: string

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

@Input()value: any

Tracks the value of the radio input element

Description

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' } -->
  `,
})
export class ReactiveRadioButtonComp {
  form = new FormGroup({
    food: new FormControl('lamb'),
  });
}

Methods

A lifecycle method called when the directive is initialized. For internal use only.

ngOnInit(): void

Parameters

There are no parameters.

Returns

void

Lifecycle method called before the directive's instance is destroyed. For internal use only.

ngOnDestroy(): void

Parameters

There are no parameters.

Returns

void

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

writeValue(value: any): void

Parameters
value any

The checked value

Returns

void

Registers a function called when the control value changes.

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

Parameters
fn (_: any) => {}

The callback function

Returns

void

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

fireUncheck(value: any): void

Parameters
value any
Returns

void

Registers a function called when the control is touched.

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

Parameters
fn () => {}

The callback function

Returns

void

Sets the "disabled" property on the input element.

setDisabledState(isDisabled: boolean): void

Parameters
isDisabled boolean

The disabled value

Returns

void

© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v9.angular.io/api/forms/RadioControlValueAccessor