ngModelChange 如何在 ngModel 指令中不提供模型名称的情况下工作

Posted 2023-02-22

【中文标题】ngModelChange 如何在 ngModel 指令中不提供模型名称的情况下工作

【英文标题】：How does ngModelChange works without providing model name in ngModel directive

【发布时间】：2018-07-23 12:15:19

【问题描述】：

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

【参考方案1】：

是的，ngModelChange() 无需向 ngModel 提供模型名称即可工作。

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

_this.updateValueAndValidity( emitEvent: false );

您可以在 \@angular\forms\esm5\forms.js ► 第 3850 行找到

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

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

如果emitModelToViewChange 是true，将通知视图新值 通过onChange 事件。

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

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 行相同的文件行

【讨论】：

Angular 12 仍然有效吗？

【参考方案2】：

在Source codengModelChange中只是一个事件发射器。

  @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 值分开。

---

希望这会有所帮助。

【参考方案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 传递给输入