{ "id": "api/forms/RadioControlValueAccessor", "title": "RadioControlValueAccessor", "contents": "\n\n
\n
\n
\n \n API > @angular/forms\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

RadioControlValueAccessorlink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

The ControlValueAccessor for writing radio control values and listening to radio control\nchanges. The value accessor is used by the FormControlDirective, FormControlName, and\nNgModel directives.

\n\n \n
\n \n \n \n \n\n

NgModuleslink

\n\n\n\n \n
\n

Selectorslink

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

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n @Input()
name: string\n 		\n \n

Tracks the name of the radio input element.

\n\n \n
\n \n @Input()
formControlName: string\n 		\n \n

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

\n\n \n
\n \n @Input()
value: any\n 		\n \n

Tracks the value of the radio input element

\n\n \n
\n
\n\n\n\n \n\n\n \n
\n

Descriptionlink

\n \n

Using radio buttons with reactive form directiveslink

\n

The follow example shows how to use radio buttons in a reactive form. When using radio buttons in\na reactive form, radio buttons in the same group should have the same formControlName.\nProviding a name attribute is optional.

\n\nimport {Component} from '@angular/core';\nimport {FormControl, FormGroup} from '@angular/forms';\n\n@Component({\n selector: 'example-app',\n template: `\n <form [formGroup]=\"form\">\n <input type=\"radio\" formControlName=\"food\" value=\"beef\" > Beef\n <input type=\"radio\" formControlName=\"food\" value=\"lamb\"> Lamb\n <input type=\"radio\" formControlName=\"food\" value=\"fish\"> Fish\n </form>\n\n <p>Form value: {{ form.value | json }}</p> <!-- {food: 'lamb' } -->\n `,\n})\nexport class ReactiveRadioButtonComp {\n form = new FormGroup({\n food: new FormControl('lamb'),\n });\n}\n\n\n\n
\n \n\n \n\n \n\n \n\n
\n

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n fireUncheck()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

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

\n\n
\n
\n \n\n fireUncheck(value: any): void\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n value\n any\n \n \n
\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n\n \n
\n\n \n \n \n\n
\n
\n\n\n" }