Angular validator and two-way binding problem

Question

My source code can be accessed through the following link:

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

I have set up the two-way binding for both division and system fields. I click the "Add New Calltree", a modal popup and then For example, I select "A1" from the division drop-down box. After that, I enter "ABC" to the System field, finally, I click the "Save" button.

I expect the console should show the following:

CallTree {division: "A1", systemName: "ABC"}

However, the console should show the following actually:

CallTree {division: "A1", systemName: ""}

I have tried select other value in the drop-down box, the division value changes accordingly, however, the systemName value does not change accordingly, would you tell me why?

Answer 1

The value of your form would be in this.myForm.value and NOT in this.callTree

Your save function should look something like this:

save() {
  if (this.myForm.valid) {
    console.log(this.myForm.value);
  } else {
    this.validateAllFormFields(this.myForm);
  }
}

Here's the Working Sample Code for your ref.

Answer 2

if you want to get value into this.callTree object than

you just have to replace your save function

save() {
     if (this.myForm.valid) {
      Object.assign(this.callTree,this.myForm.value);
      console.log(this.callTree);
    } else {
        this.validateAllFormFields(this.myForm);
    }
  }

Hope this will useful for you.

let me know if you want to know more.

thanks