Angular - Запретить (ngModelChange) вызываться при HTML рендере

Question

в настоящее время используется Angular 6

У меня есть некоторая разметка HTML, которая выглядит следующим образом:

<div *ngIf="isOnline">
  <input [ngModel]="selectedEscrowOffering" (ngModelChange)="onChangeEscrow($event)"/>
</div>

и функция в файле .ts

onChangeEscrowDropdown($event) {
  console.log($event, "was returned");
}

Когда я изменяю переменную isOnline с false на true, onChangeEscrow запускается, возвращая значение undefined

Как мне остановить Angular от запуска ngModelChange при рендеринге HTML, который ссылается на функцию?

Answer 1

Я был бы склонен полностью использовать реактивные формы. С этой разметкой ...

 <form [formGroup]="issuerDetails" 
   <div class="form-group">
     <input formControlName="escrowOffering"> 
   </div>
</form>

Вы получите значение по this.issuerDetails.value.escrowOffering.

Если вам нужно захватить, когда это значение изменилось

this.issuerDetails.get('escrowOffering').valueChanges.subscribe(val => {
  console.log('The value of escrowOffering changed to', val);
  this.doOtherThing(val);
});

Лично, Я предпочитаю использовать Reactive Forms для ngModel почти всегда.

Надеюсь, это поможет.

Answer 2

Вы можете попробовать это

<div *ngIf="isOnline">
  <input [ngModelChange]="selectedEscrowOffering" (ngModelChange)="$event && onChangeEscrow($event)"/>
</div>

Это будет выполнено onChangeEscow только тогда, когда $event верно

Answer 3

Вы рассматривали возможность использования [hidden] вместо *ngIf?

Я сам еще не пробовал, но поскольку объект не разрушается и не создается при его скрытии (в отличие от использования *ngIf) разумно ожидать, что это не вызовет события привязки

<div [hidden]="!isOnline">
  <input [ngModelChange]="selectedEscrowOffering" (ngModelChange)="onChangeEscrow($event)"/>
</div>

Answer 4

Мой код был запущен в реактивной форме ранее, я не опубликовал весь фрагмент кода.

ReactiveForms и templateForms (ngModel) плохо сочетаются друг с другом.

My переменная связывания формы и переменная ngModel указывали на две разные вещи escrowOffering и selectedEscrowOffering.

FormControl вызвал изменение события жизненного цикла для ngModel в результате:

<form [formGroup]="issuerDetails" 
   <div class="form-group">
     <input 
     formControlName="escrowOffering" 
     [ngModel]="selectedEscrowOffering" 
     (ngModelChange)="onChangeEscrowDropdown($event)"> 
  </div>
</form>

ngModel конфликтует с formControl в том, как заданы значения, поэтому я сделал следующее:

• Удалить formControlName из HTML
• Добавлено [ngModelOptions]="{standalone: true}" -> это заставляет элемент управления формы игнорировать это HTML
• Добавлена ​​привязка formControl в обратном вызове, так как мы все еще используем реактивные формы

, финальный код ниже:

 <form [formGroup]="issuerDetails" 
     <div class="form-group">
       <input 
         formControlName="escrowOffering" 
         [ngModel]="selectedEscrowOffering" 
         (ngModelChange)="onChangeEscrowDropdown($event)"> 
     </div>
 </form>

Так выглядит новая функция обратного вызова, ngModelChange обновляет formControl теперь

onChangeEscrowDropdown($event){
    this.issuerDetailsForm.escrowOffering.setValue($event);
}

Дополнительные примечания

Песочница с кодом здесь изолирует только ngModel и переменную isOnline сама по себе, не вызывает перехватов жизненного цикла

https://stackblitz.com/edit/angular-bcsmux?file=src%2Fapp%2Fapp.component.html

Кроме того, в качестве альтернативы я мог бы полностью удалить ngModel и использовать только реактивные формы. ValueChanges мог использоваться для отслеживания изменений

https://www.tektutorialshub.com/angular/valuechanges-in-angular-forms/