CODEWITHSUNDEEP
angularangular7
rastrano
rastrano

Reputation: 133

How to make angular reactive forms able to setValue for a radio button?

My angular reactive form is not able to set the UI state of the radio button, I'm trying to load a from state for a 'saved search' feature of an app

I'm using angular 7 and angular material

//declaration
    this.filterForm = new FormGroup({
      heating: new FormControl('1'),
    });

//loadSearch fuction
  this.filterForm.setValue(valueObject);

  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="heating-1" >
          <input formControlName="heating" id="heating-1" type="radio" name="heating" (change)="onFilterCheckChange($event,'heating')" class="mdl-radio__button"  [value]=1 checked>
          <span class="mdl-radio__label">Si</span>
        </label>
        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="heating-2" >
          <input formControlName="heating" id="heating-2"  type="radio" name="heating" (change)="onFilterCheckChange($event,'heating')" class="mdl-radio__button"  [value]=0 >
          <span class="mdl-radio__label">No</span>
        </label>

Expected result is that form UI gets updated when i call .setValue in loadSearch fuction, actual result is that nothing happens to the UI (but the formControl object has the correct value)

Upvotes: 1

Views: 3697

Answers (1)

Hawz
Hawz

Reputation: 4027

Basically, you have two ways:

You can: Set the value for the entire form: so your valueObject would override the value you provided in the declaration and, if the only form field was heating, you'd have something like this:

this.filterForm.setValue({
  heating: '0' // or 1
});

Or: Set the value just for the heating field:

this.filterForm.controls.heating.setValue('0');

Also, please make sure that radio value types match with the data you are initialising and setting, so you might want to use string type in the input and also get rid of the checked property.

Hope this helps!

Upvotes: 4

Related Questions