Запретить закрытие вкладки браузера, когда форма загрязнена в Угловом 2

Как предотвратить закрытие вкладки браузера, когда форма загрязнена в Угловом 2?Запретить закрытие вкладки браузера, когда форма загрязнена в Угловом 2

Мой HTML тело содержит компонент:

<body> 
    <my-app>Loading, please wait...</my-app> 
    </body>

который содержит маршрутизатор навигации и выход маршрутизатора:

<nav> 
(...) 
</nav> 
<router-outlet></router-outlet>

и когда маршрутизатор переходит на страницу редактирования, у меня есть некоторые формы там :

<form #myForm="ngForm"> 
    <button pButton type="text" label="Save" (click)="onSave()" [disabled]="!myForm.valid || myForm.pristine"></button> 
    </form>

Теперь, если форма не «первозданная», я хочу попросить подтверждения, когда пользователь пытается закрыть вкладку браузера:

window.onbeforeunload = function() { 
    if (form.dirty) { 
    return "You have unsaved data changes. Are you sure to close the page?" 
    } 
}

Как я могу получить доступ к грязному состоянию угловых форм в каноническом образе оттуда? Я могу зарегистрировать событие для изменения поля в каждом поле и установить глобальный грязный флаг, но мне нужно было бы поместить этот код на каждый из каждой навигации и после этого сохранить этот код, чтобы сообщение оставалось неизменным. Есть ли другой способ проверить, есть ли угловая форма на странице, которая находится в грязном состоянии?

источник

2016-11-21 9ilsdx 9rvj 0lo

Возможно

@HostListener('window:beforeunload', ['$event']) 
handleBeforeUnload(event) { 
    if (connected) { 
    return "You have unsaved data changes. Are you sure to close the page?" 
    } 
}

источник

2016-11-21 12:06:46

И я определяю, что @HostListener в каждом компоненте, который имеет #ngForm, который может быть загрязнен? –

В любом случае, @HostListener, добавленный к моему компоненту, отображается серым (неиспользуемый код) и не вызывается при закрытии окон. –

Извините, вы правы. Я забыл добавить 'window:' (см. Обновленный вопрос). Я не знаю о вашем «показанном сером». В любом случае, это не называется напрямую. –

Просто вы можете использовать Jquery, чтобы получить состояние из ng-form.

@HostListener('window:beforeunload', ['$event']) 
beforeUnloadHandler(event) { 
    if($('form').hasClass('ng-touched')) { //You can check with ng-dirty based on your requirements. 
     let confirmMessage = 'You have unsaved data changes. Are you sure to close the page?' 
     event.returnValue = confirmMessage; 
     return confirmMessage; 
    } 

}

В моем случае я просто показывает предупреждение диалог, если что form была затронута.

источник

2017-02-07 09:33:21

Пробуйте эту директиву https://github.com/extremeprog-com/ng-prevent-navigation.

Так это должно быть просто

<div ng-prevent-navigation="vm.pageShouldBeReloaded" 
    ng-prevent-navigation-text="Payment form has unsaved changes. 
     If you leave the page now you will lose those changes." 
></div>

источник

2017-02-16 21:35:59 myfoxtail

Я не думаю, что это для Angular2 – Francesco

Запретить закрытие вкладки браузера, когда форма загрязнена в Угловом 2

ответ

Смежные вопросы