如果不在ngModel指令中提供模型名称，ngModelChange如何工作

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)">

Answer 1

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

Answer 2

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.

Answer 3

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