Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How [ngModel] and (ngModelChange) work together?

I am new to angular and I am learning Angular 6. I understood about ngModel. But while I was experimenting with ngModelChange, some questions raised.

I have an html element HTML

<input #input  type="text" [value]="name" [(ngModel)] ="name" (ngModelChange) ="change(input.value)"/>

Typescript

change(event :any) {
    this.name = event;
    console.log(this.name);
}

Upon changing the value in the input , I can see the changes with the name property.

When I changed the html code to

HTML

<input #input type="text" [value]="name"  [ngModel] ="name" 
(ngModelChange)="change(input.value)" />
{{ name }}

TS

change(event :any) {
    this.name = event;
    console.log(this.name);
}

It's working fine as expected in the console and in the UI.

Question 1

<input #input  type="text" [value]="name" [(ngModel)] ="name" 
(ngModelChange) ="change(input.value)"/>

&

<input #input type="text" [value]="name"  [ngModel] ="name" 
(ngModelChange)="change(input.value)" />

are same??

Question 2.

When I remove the [ngModel] directive. The ngModelChange is not getting triggered. Is it mandatory to have [ngModel]? If yes,Why?

HTML

<input #input type="text" [value]="name" 
(ngModelChange)="change(input.value)" />
<br/>
<br/>
{{ name }}

TS

change(event: any) {
     this.name = event;
     console.log(this.name);
 }

This would be a great help. Thanks in Advance.

like image 998
Vijay Avatar asked Sep 12 '19 07:09

Vijay


People also ask

Can we use ngModelChange without ngModel?

ngModelChange need ngModel class to function. change event bound to classical input change event. ngModelChange It fires when the model changes. You cannot use this event without ngModel directive.

What is the difference between ngModel and ngModelChange?

The NgModel class has the update property with an EventEmitter instance bound to it. This means we can't use (ngModelChange) without ngModel . Whereas the (change) event can be used anywhere, and I've demonstrated that above with the [value] property binding instead.

What does [( ngModel )] do?

The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.

Which module is required for ngModel?

NgModel is used to create a top-level form group Instance, and it binds the form to the given form value. NgModule: Module used by NgModel is: FormsModule.


1 Answers

The [()] syntax is easy to demonstrate when the element has a settable property called x and a corresponding event named xChange. Here's a SizerComponent that fits this pattern. It has a size value property and a companion sizeChange event

https://angular.io/guide/template-syntax#basics-of-two-way-binding

So, they are equivalent.

<input [(ngModel)]="name"/>
<input [ngModel]="name" (ngModelChange) ="name = $event"/>

But if there is no corresponding property, then xChange will not work.

<input (ngModelChange) ="name = $event"/>
like image 150
Hsuan Lee Avatar answered Sep 17 '22 22:09

Hsuan Lee