Where does angular store the value of any input elements?-CodePudding

i come from jquery background and trying to learn angular, so i created a basic form component and set the value of the form element. Everything is working as expected. I have no issue in setting and getting the value from the form element

I don't seem to understand where is angular storing the element values?

when i executed this inside the console tab
document.getElementsByClassName('form-control')[0]                                                                                         


<input _ngcontent-ina-c83="" formcontrolname="fname" type="text" pinputtext="" 
 ng-reflect-name="fname">


 Then when i executed this code
 document.getElementsByClassName('form-control')[0].value
 
 i got "John"

Question :

i don't seem to get how and where the value entered is stored , as in case of jquery when we set the value, we can basically see that in html that is generated inside the value property of the input element.
Also i am confused how is browser able to display value inside the input box correctly without the value property beign set in html by angular ? Am i missing something?

CodePudding user response：

Adding value attribute isn't the only way to set value for an input element, it helps to set a default value on load, however JavaScript can set the value without modifying the DOM and that's exactly what Angular does, and similar thing is done by JQuery as well when you update a value of an input field with .val()

document.querySelector("#change-val").addEventListener("click", () => {
  let inputEl = document.querySelector("#sample-inp");
  inputEl.value = "modified value";
  //DOM will remain un-modified
  console.log(inputEl.outerHTML);
});

<input id="sample-inp" type="text" value="default value"/>
<button id="change-val" type="button">change Value</button>

That said Angular still maintaines values of the binded formField in internal memory maps them to the Observables and updates them on change events.

CodePudding user response：

you can use Two-Way Binding in angular. for example

in html code:

<input type="text" [(ngModel)]="userName" >

You should have a variable in the typescript called "userName". Then you can get and set the userName in typescript. Also, if you change the "userName" in the html page, the "userName" variable will be automatically updated in the typescript...

Hope this helps!

CodePudding user response：

Angular uses something called 2 way binding which makes it a lot easier and more efficient to access values. It uses ngModel directive to give you access to values in your ts file. You can check the documentation here

But here is an example for your case if you want to access the value of your input. You first need to declare a variable in your ts file then bind it to ngModel:

username: string;

HTML

<input [(ngModel)]="username"/>

This way you have read and write access to your input value:

//Read Value
readValue(){
   let inputValue = this.username;
}

//Set Value
setValue(){
   this.username = "xyz";
}