Reading Checkbox FormControl value in Angular Reactive Form

Question

I have the following code

if (this.myForm.value['isDefault'] === true)

Where isDefault is a checkbox FormControl. Now if the checkbox is checked I am expecting this.myForm.value['isDefault'] will result in true. When I alert this, it indeed shows true but this comparison does not result in true.

Can you try console.log(typeof this.myForm.value['isDefault']) ? And show the output — R3tep
– R3tep, Commented Jun 27, 2019 at 15:41
Can you post the all of the code surrounding this logic ? For example how you update your model when someone clicks on the checkbox and so one. Otherwise it is difficult to help you with just those info. — MaieonBrix
– MaieonBrix, Commented Jun 27, 2019 at 15:41
Can you show more code and HTML? A checkbox (or any form element)'s value is not always the same as it's checked state. — HBlackorby
– HBlackorby, Commented Jun 27, 2019 at 15:51

Hien Nguyen · Accepted Answer · 2019-06-27 15:50:19Z

5

You need recheck your form and code in TS file. I reproduce it still work correctly.

HTML

<div class="container">
    <div>
        <form [formGroup]="theForm" (submit)="check()">
            Check? <input type='checkbox' formControlName="firstCheck"/>
  <input type="submit" value="check">
    </form>
    </div>

</div>

TS

export class AppComponent {

  theForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.theForm = fb.group({
      firstCheck: false
    })
  }

  check() {
    console.log(this.theForm.value['firstCheck'] === true)
  }
}

Demo https://stackblitz.com/edit/checkbox-reactive-aagwtp?file=app%2Fapp.component.ts

answered Jun 27, 2019 at 15:50

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CruelEngine · Accepted Answer · 2019-06-27 15:54:53Z

1

If you want a value of a form control , you can also access using form.get('key').value.

I forked @Hien Nguyen's stckblitz :

Refer : https://stackblitz.com/edit/checkbox-reactive-hdwhsj?file=app/app.component.ts

So i would use : this.myForm.get('isDefault').value

answered Jun 27, 2019 at 15:54

CruelEngine

2,8934 gold badges26 silver badges46 bronze badges

Collectives™ on Stack Overflow

Reading Checkbox FormControl value in Angular Reactive Form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related