Происходит бесконечный цикл и не удается обновить значение элемента управления формы через глобальный сервис и, наконец, получить ошибку максимального размера стека

Question

<input class="form-control dateicon" maxlength="10" minlength="10" [maxDate]="api.maxDate" name="xyz" (ngModelChange)="def($event,2)"[bsConfig]="{ isAnimated: true ,dateInputFormat: 'DD/MM/YYYY'}" formControlName="abc" bsDatepicker placeholder="DD / MM / YYYY"/>

Приведенный выше код является моим кодом выбора даты ngx bootstrap, и я запускаю метод с помощью ngModelchange.

Приведенный ниже код представляет код component.ts:

def(event,type){
if(type == 2){
 this.globals.stacks.controls['abc'].setValue(event);
}
}

Ниже приведен мой код global.ts:

   stacks: FormGroup = this.formbuilder.group({
    abc: ['',ValideService.ghi],
    xyz: [''],
  }); 

Ниже приведен мой проверочный код службы:

static ghi(control) {

        let temp = control.value;
        var minDate: any = new Date('09/01/2018');
        var maxDate: any = new Date();
        if (temp == 'undefined' || temp == null || temp == '') {
            return { 'minDatemaxDatereq': true };
        } else if (minDate > temp || maxDate < temp) {//&& 

            return { 'minDatemaxDate': true };
        }
        else {
            return null;
        }
    }

Всякий раз, когда я выбираю конкретную дату из средства выбора даты, метод def() из файл component.ts запускается и повторяется n раз, пока я не получу ошибку максимального размера стека.

Answer 1

Значение this.globals.stacks.controls['abc'] уже установлено пользователем из браузера, и вы подписались на (ngModelChange)="def($event,2)", и внутри этого метода def вы снова устанавливаете значение вручную, что снова вызывает событие ngModelChange, и это продолжается пока стек не переполнится.

Что вызывает переполнение стека?

Переполнение стека происходит, когда существует рекурсивная функция (функция, которая вызывает себя)> без точки выхода. Браузер (хостинговая среда) имеет максимальный стековый вызов, который он> может разместить до выдачи ошибки стека Вы можете получить более подробную информацию по этой ссылке

Вместо этого вы можете использовать valueChanges и выполнять необходимую работу, но удалить событие (ngModelChange), иначе оно снова попадет под событие l oop.

Answer 2

Я думаю, что вы должны просто удалить (ngModelChange)="def($event,2)".

Реактивные формы будут обрабатывать обновление вашего FormControl для вас.

Вы создаете бесконечное l oop, устанавливая FormControls значение вручную. this.globals.stacks.controls['abc'].setValue(event); также обновляет ваше представление, которое затем снова вызывает (ngModelChange)="def($event,2)".