Question

ngModelChange()如何运作？

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

但我不确定，如果我使用ngModelChange事件，它是如何工作的（ngModelChange()），即使我不是providing model name to ngModel。

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

Answer 1

是的，ngModelChange（）无需为ngModel提供模型名称。

发生这种情况的原因，（ngModelChange）是ngModel指令的@Output。当在输入中插入一些值时 emitEvent变为真这是默认的假（因此它不会在初始时间激活页面加载）。

_this.updateValueAndValidity（{emitEvent：false}）;

你可以在 \ @ angular \ forms \ esm5 \ forms.js找到►行号3850

如果emitEvent为true，则为此更改将导致valueChanges上的FormControl事件被发出。这是默认值为真（因为它落到updateValueAndValidity）。

如果emitViewToModelChange为true，则会触发ngModelChange事件以更新模型。如果未指定emitViewToModelChange，则这是默认行为。

如果emitModelToViewChange为true，则会向视图通知新值通过onChange活动。

现在的问题是为什么在$ event中输入相同的值而不是ture，这会导致

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);
    };

相同的文件行号3911至3919

Answer 2

Source code ngModelChange只是一个事件发射器。

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

执行viewToModelUpdate函数时会触发。

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

ngModel可以是任何内容，并且没有与其他任何内容的直接链接。在声明的代码中，它仅用于名为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;
  }
}

我可能在这里错了，但我认为ngModel不是单一的事实来源，但this.viewModel似乎是，因为ngModel不需要值ngModelChange工作，因为它可以从ngModel值中逐步进行操作。

希望这有帮助。

Answer 3

你在没有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);
   }

您可以尝试将id传递给输入

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

3 个答案: