Check to see if radio buttons are dirty/touched in a reactive form

1
votes

My StackBlitz example

I have built an Angular Reactive Form. On it I have 2 radio buttons, one selected by default(however in my example its not showing selected on the UI).

I have an ngIf div that should display if the radio button has changed or touched || Dirty, e.g

<div formGroupName="radioButtons" class="form-group col-6 pl-0 pt-3">
    <div class="form-check-inline">
        <label for="yes" class="col-12 customradio"
            ><span>yes</span>
            <input value="yes" id="yes" type="radio" name="radiot" formControlName="radiot"/>
        </label>
        <label for="no" class="customradio"
            ><span>no</span>
            <input value="no" id="no" type="radio" name="radiot" formControlName="radiot" />
        </label>
    </div>
    <div class="form-check__related" *ngIf="radioButtons.radiot.touched">
      DISPLAY ME
    </div>

However, I cant get it to work and get 

Error: Cannot read property 'radiot' of undefined
2
javascriptangulartypescriptangular-reactive-forms
Seems you are not using the Angular Reactive Forms. use { FormControl } from '@angular/forms'; – DevLoverUmar
you are missing controls before the control name : radioButtons.controls?.radiot.touched – Bilel-Zheni
@Z.Bolbol yes already tried that. controls then becomes undefined – Tom Rudge

2 Answers

2
votes

juts replace

*ngIf="radioButtons.radiot.touched"

with

*ngIf="form.controls.radioButtons.touched"

Your problem will be solved

https://stackblitz.com/edit/angular-pfctfu

1
votes

juste add a getter method inside your ts which return the form group :

 get radioButtons(){
    return this.form.get('radioButtons') ;
  }

inside your html 

{{radioButtons.controls.radiot.touched}}