How does ngModelChange works without providing model name in ngModel directive

Question

How does ngModelChange() works?

(ngModelChange) is the @Output of ngModel directive. It fires when the model changes. You cannot use this event without ngModel directive

but I am not sure, how does(ngModelChange) it works, if I am use ngModelChange() event, even i am not providing model name to ngModel.

<input #gb type="text" pInputText class="ui-widget ui-text" **ngModel**  
 (ngModelChange)="functionName($event)">

score 7 · Accepted Answer · answered Feb 24 '18 at 06:40

Yes, ngModelChange() work without providing model name to ngModel.

cause of this happen, (ngModelChange) is the @Output of ngModel directive. when insert some value in input that time emitEvent is become true which is by default false (so it not fire page load on initial time).

_this.updateValueAndValidity({ emitEvent: false });

you can find at \@angular\forms\esm5\forms.js ► line no 3850

If emitEvent is true, this change will cause a valueChanges event on the FormControl to be emitted. This defaults to true (as it falls through to updateValueAndValidity).

If emitViewToModelChange is true, an ngModelChange event will be fired to update the model. This is the default behavior if emitViewToModelChange is not specified.

If emitModelToViewChange is true, the view will be notified about the new value via an onChange event.

now question is that why get same value in $event which is inserted in input instead of ture, that cause

FormControl.prototype.setValue = /**

function (value, options) {
        var _this = this;
        if (options === void 0) { options = {}; }
        (/** @type {?} */ (this)).value = this._pendingValue = value;
        if (this._onChange.length && options.emitModelToViewChange !== false) {
            this._onChange.forEach(function (changeFn) { return changeFn(_this.value, options.emitViewToModelChange !== false); });
        }
        this.updateValueAndValidity(options);
    };

same file line no 3911 to 3919

Is it still valid with Angular 12? – qfwfq Sep 03 '21 at 07:32 — qfwfq, Sep 03 '21 at 07:32

score 4 · Answer 2 · edited Jun 20 '20 at 09:12

In the Source code ngModelChange is just an event emitter.

  @Output('ngModelChange') update = new EventEmitter();

It fires when the viewToModelUpdate function is executed.

viewToModelUpdate(newValue: any): void {
  this.viewModel = newValue;
  this.update.emit(newValue);
}

ngModel can be anything and does not have a direct link to anything else. In the code it is declared and it is only used in a function called ngOnChanges

@Input('ngModel') model: any;

ngOnChanges(changes: SimpleChanges) {
  this._checkForErrors();
  if (!this._registered) this._setUpControl();
  if ('isDisabled' in changes) {
    this._updateDisabled(changes);
  }

  if (isPropertyUpdated(changes, this.viewModel)) {
    this._updateValue(this.model);
    this.viewModel = this.model;
  }
}

I could be wrong here but it looks to me that ngModel is not the single source of truth but this.viewModel seems to be, because of this ngModel does not need a value for ngModelChange to work as it opporates seporatetly from the ngModel value.

Hope this helps.

Manoj Bhardwaj · Answer 3 · 2018-02-27T05:06:03.117

you try it without ngModel

<select (change)="changed($event)">
     <option *ngFor="let data of allData" [value]="data.id">
           {{data.name}}
       </option>
</select>

changed(e){
   //event comes as parameter and then find data manually
   //by using e.target.data

}

              OR BY ID

 <inputtype="text" #byid (change)="onChange(byid.value)" />
  onChange(title:string){
   alert(title);
   }

You can try by passing id into input

How does ngModelChange works without providing model name in ngModel directive

3 Answers3