Angular Reactive Form value doesn't work properly?

Question

I've created Angular Reactive Form with boolean values of controls. I need get value from slide-toggle control and resolve condition. It looks very simply but in my code result is always false.

createForm() {
        this.threatForm = this.fb.group({
        threatId: 0,
        name: ['', [Validators.required]],
        category: [1, [Validators.required]],
        description: [''],
        internalExternal: [1, [Validators.required]],
        securitySafety: [3, [Validators.required]],
        avoidRisk: [],
        shareRisk: [],
        reduceRisk: [],
        acceptRisk: [],
        confidenciality: [false],
        integrity: [false],
        availability: [false],
        authenticity: [false],
    })
}

ngOnInit() {
    this.onGetThreatsCategory();

    if (this.threatForm.value.avoidRisk === true) {
        console.log("Risk value: TRUE")
    }

    else {
        console.log("Risk value: FALSE")
    }
}

When I print value in HTML I'm getting good result,

  AvoidRisk: {{ this.threatForm.controls.avoidRisk.value | json }}

but in TypeScript value is FALSE each time.

hard to tell without the markup, but is the AvoidRisk value a string? if (this.threatForm.value.avoidRisk === 'true') — joh04667
– joh04667, Commented Jan 29, 2018 at 16:28
Well I don't see anywhere that you are setting value to that form control, so how can it be true? — AVJT82
– AVJT82, Commented Jan 29, 2018 at 17:26

vince · Accepted Answer · 2018-01-29 20:24:42Z

1

The problem is that you are trying to check the value in your ngOnInit method, but you are initializing your form control for avoidRisk to a falsy value. Additionally, you are not building the form before you check the value of the specific control, so you will always get false.

First, you will need to give avoidRisk a default value of true (assuming that you want it to be true in the OnInit lifecycle hook, as your example shows):

createForm() {
  this.threatForm = this.fb.group({
    threatId: 0,
    name: ['', [Validators.required]],
    category: [1, [Validators.required]],
    description: [''],
    internalExternal: [1, [Validators.required]],
    securitySafety: [3, [Validators.required]],
    avoidRisk: [true], // give it the initial value of true
    shareRisk: [],
    reduceRisk: [],
    acceptRisk: [],
    confidenciality: [false],
    integrity: [false],
    availability: [false],
    authenticity: [false],
  })
}

Then in your ngOnInit method, create the form before you check for the value of it's controls. Now you can subscribe to the valueChanges property on your form control, which will return an Observable of it's value.

ngOnInit() {
  this.createForm(); // create the form

  /* subscribe to your form control's value */
  this.threatForm.get('avoidRisk').valueChanges.subscribe(value => {
    if (this.threatForm.get('avoidRisk').value === true) {
      console.log('Risk value: TRUE');
    } else {
      console.log('Risk value: FALSE');
    }
  });
}

edited Jan 29, 2018 at 20:24

answered Jan 29, 2018 at 19:23

vince

8,3463 gold badges39 silver badges45 bronze badges

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

4 Comments

redux17 Over a year ago

My default value for avoidRisk needs to be "false" but it does not metter it can be true. I want only check which value user selected for this field and call if condition..I made last chagnes with adding createForm() in ngOnInit() method and the same thing. Problem is what I'm always getting value from createForm() method, but I want value from form input. If I set default value on true my result is true, if I set false result is false. I can not get value from control in typesricpt in html I can see good result..

vince Over a year ago

Got it -- updated my answer to show the behavior you are after.

redux17 Over a year ago

It's working....Thank you @vincecampale...How much code for one boolean condition. I need apply for rest of controls...Thanks man +1 :-)

vince Over a year ago

Happy to help :) Consider "accepting" the answer by clicking the check mark so others know that your question has been answered. Welcome to SO!

Anu Sivanand · Accepted Answer · 2018-01-29 16:43:17Z

0

To get value from a form control, this.threatForm.get('avoidRisk').value, you can use this as,

if (this.threatForm.get('avoidRisk').value === true) { ... } else { ... }

and in html,

{{threatForm.get('avoidRisk').value}}

answered Jan 29, 2018 at 16:43

Anu Sivanand

764 bronze badges

4 Comments

redux17 Over a year ago

I've changed this and I got other error: "(TS) Objesct is possibily null".

redux17 Over a year ago

I've added this Non-null assertion operator and fix error but result is same. It's always FALSE.. if (this.threatForm.get('avoidRisk')!.value === true)

Anu Sivanand Over a year ago

In createForm function change like this, avoidRisk: [''] and check if (this.threatForm.get('avoidRisk').value) { ... } else { ... }

redux17 Over a year ago

I did it but the same thing...return FALSE again each time.

Collectives™ on Stack Overflow

Angular Reactive Form value doesn't work properly?

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related