RadioControlValueAccessor

From Get docs
< @angular/formsAngular/docs/9/api/forms/radiocontrolvalueaccessor


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

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

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