Угловые значения меняются несколько раз при загрузке страницы

Question

Я использую Angular 4, и я проверяю, изменилось ли какое-либо значение пользователем или нет?На моей странице более 100 элементов управления (текстовое поле, выпадающий список и редактируемая сетка)

Мне нужно проверять только то, изменилось ли какое-либо значение или нет.Для этого я использую приведенный ниже код, но он вызывается несколько раз при загрузке страницы.

Как мне этого избежать. Мне нужно valuechange будет выполняться только при изменении пользователем любого значения.

import { Component, OnInit, ViewChild, AfterViewInit, HostListener, OnChanges, DoCheck, AfterViewChecked,OnDestroy } from "@angular/core";


 @ViewChild('fromNote') fnotes;
 
 ngAfterViewInit() {
        this.fnotes.valueChanges.subscribe(val => {
            alert('changed');
        });
}

Answer 1

Согласно официальной документации , ngOnChanges вызывается по умолчанию до изменения ngOnInit, а также при изменении свойств ввода с привязкой к данным.

Итак, если вы хотите избежать этого, попробуйте:

• Ограничение изменения свойства @Input при загрузке страницы
• Используйте флаг, чтобы обнаруживать только сделанные пользователем изменения:

например:

private initialised = false;

ngInInit(){
  ...
  this.initialized = true;
}

ngOnChanges(){
  if(this.initilazied){<your code here>}
}

Или: используйте другую ловушку lifecylce или используйте вызовы метода (change) в компоненте

Answer 2

            import { Component, OnInit, ViewChild, AfterViewInit, HostListener, OnChanges, DoCheck, AfterViewChecked,OnDestroy } from "@angular/core";

            @ViewChild('fromNote') fnotes;
            public subScription;
            ngAfterViewInit() {
                 this.subScription=  this.fnotes.valueChanges.subscribe(val => {
                     alert('changed');
                 });
            }

            ngOnDestroy() {
                 this.subScription.unsubscribe()
            }

Вы пытаетесь отменить подписку на изменения стоимости в ngOnDestroy?Если нет, попробуйте отписаться.Valuechanges является наблюдаемым и должен быть отписан, иначе он будет искать изменения в каждом случае.

Answer 3

In Angular 5 вы сможете указать update mode для forms and form controls.

updateOn: 'submit' запускает изменения значений только тогда, когда форма имеет вид submitted.

this.nameForm = new FormGroup ({
  firstname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'submit'
  }),
  lastname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'submit'
  })
});

Различные варианты: updateOn: 'blur' и updateOn: 'submit'

const c = new FormControl('', { updateOn: 'blur' }); и

 const c = new FormControl('', { updateOn: 'submit' });

С Официальная документация updateOn to 'submit', задержит значение и действительность обновляются, пока не сработает родительская форма отправить событие.