will-transition-custom

controller.js

import Controller from '@ember/controller';
import {action} from '@ember/object';
import {tracked} from '@glimmer/tracking';

export default class FormController extends Controller {
  
  // Tracking

  @tracked showExitModal = false;
  
  // Actions
  
   @action confirmExit() {
    // check we have a previous transition to retry
    if (this.previousTransition) {
      // retry the previous route transition
      // this time the modal is active so the routes
      // willTransition action will let us pass.
      this.previousTransition.retry();
    }
  }

  @action cancelExit() {
    //Clear the modal and transition
    this.showExitModal = false;
    this.previousTransition = null;
  }
}

route.js

import Route from '@ember/routing/route';
import {action} from '@ember/object';

export default class FormRoute extends Route {

  // Actions

  @action willTransition(transition) {
    
    const controller = this.controller;
    
    // is the exit modal visible?
    if (!controller.showExitModal) {
      
      // show modal to ask the user to confirm exit
      controller.showExitModal = true;
      
      // save the current transition to retry later
      controller.previousTransition = transition;
      
      // stop the current transition
      transition.abort();
      
    } else {
      
      // modal is visible - theirfor we must assume they have
      // confirmed they want to leave - clear modal and transition state
      controller.showExitModal = false;
      controller.previousTransition = null;
      
      // Bubble the `willTransition` action so that
      // parent routes can decide whether or not to abort.
      return true;
    }
  }
}

template.hbs

<form>
  ...Forms and Forms
</form>

<ExitModal 
    @isShowing={{this.showExitModal}}
    @onConfirm={{this.confirmExit}}
    @onCancel={{this.cancelExit}}
/>