Radio button: using [formControl] instead of [formControlName]

user_10997015 0
Viewed 1037

Let's assume I have the following form in an Angular component. The 3 form controls are radio buttons:

form = new FormGroup({
    formControl: new FormControl(),
    formControl2: new FormControl(),
    formControlName: new FormControl()
});

When creating the radio buttons on the template, all the examples I've seen use [formControlName], like so:

<form [formGroup]="form">
    <input
        type="radio"
        id="formControlNameTrue"
        [formControlName]="'formControlName'"
        [value]="true"
    >
    <label for="formControlNameTrue">FCN True</label>
</form>

However, I would like to use [formControl] instead:

<input
    type="radio"
    id="formControlTrue"
    [formControl]="formControl"
    [value]="true"
>
<label for="formControlTrue">FC True</label>

The problem is that, when using 2 or more radio buttons with the [formControl] approach, the template does not display the values of the controls properly. In the following screenshot, I have selected "FC True" and then "FC2 False" with my mouse. Both of these controls have been built using [formControl]. This is the result:

Form control behavior

Please see the following stackblitz for the full code: https://stackblitz.com/edit/angular-3gbgbp.

Is there any way of creating a radio button with [formControl] only? If not, is this expected behavior or it could be a bug?

angular-reactive-forms angular-forms angular radio-button
1 Answers

There is not need to use property binding try following code.

 form: FormGroup = new FormGroup({
    formControl: new FormControl(),
    formControl2: new FormControl(),
    formControlName: new FormControl()
  });

  get formControl() {
    return this.form.get("formControl");
  }

  get formControl2() {
    return this.form.get("formControl2");
  }

  get formControlName2() {
    return this.form.get("formControlName");
  }

  constructor() {
    this.form.valueChanges.subscribe(changes => {
      console.log(changes);
    });
  }

HTML

<form [formGroup]="form">
    <div>
        <input
      type="radio"
      id="formControlTrue"
      formControlName="formControl"
      [value]="true"
    >
        <label for="formControlTrue">FC True</label>
        <input
      type="radio"
      id="formControlFalse"
      formControlName="formControl"
      [value]="false"
    >
        <label for="formControlFalse">FC False</label>
    </div>
    <div>
        <input
      type="radio"
      id="formControl2True"
      formControlName="formControl2"
      [value]="true"
    >
        <label for="formControl2True">FC2 True</label>
        <input
      type="radio"
      id="formControl2False"
      formControlName="formControl2"
      [value]="false"
    >
        <label for="formControl2False">FC2 False</label>
    </div>
    <input
    type="radio"
    id="formControlNameTrue"
    formControlName="formControlName"
    [value]="true"
  >
    <label for="formControlNameTrue">FCN True</label>
    <input
    type="radio"
    id="formControlNameFalse"
    formControlName="formControlName"
    [value]="false"
  >
    <label for="formControlNameFalse">FCN False</label>
</form>
user_62437970
Related