RadioControlValueAccessor

From Get docs
< @angular/formsAngular/docs/10/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
@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

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

fireUncheck(value: any): void

Parameters
value any
Returns

void



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