Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jamie Pollock 174 posts 853 karma points c-trib
    Sep 19, 2014 @ 11:05
    Jamie Pollock
    0

    Custom Section & Custom Editor - Unsaved Changes Warning after save

    Hey all,
    I have a custom section with custom views and editor logic. Mostly based around the tutorial found on Nibble.

    It works great except for when a user navigates away from the custom node and they're prompted with the "Unsaved Changes" warning notification. I know what's causing the notification appear. It's the "val-form-manager" an Umbraco directive which can be applied at root tag level. In this case for the form tag allow with the ng-controller.

    The actual JS logic for triggering the event is here, I'm using umbraco v7.1.6.

    I can only imagine it's because the formCtrl.$isDirty should be set to true?

    To give a bit more information. They're simple text fields bound by a POCO object. I also get this when implementing the Nibble project locally.

    Any thoughts? I'm thinking I need to set some kind of logic to avoid the formCtrl.$isDirty being true.

    Thanks,
    Jamie

  • Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib
    Sep 19, 2014 @ 11:20
    Dave Woestenborghs
    1

    Hey Jamie,

    After you saved your data you can set formCtrl.$isDirty = false

    That should solve the problem.

    Dave

  • Per Ploug 865 posts 3491 karma points MVP admin
    Sep 19, 2014 @ 11:23
    Per Ploug
    1

    Normally when editing data and sending it back to the server, you remind it when it gets returned from the server, this resets the dirty state of the editor. If you don't want these notifications, remove the val-form-manager directive

  • Jamie Pollock 174 posts 853 karma points c-trib
    Sep 19, 2014 @ 11:30
    Jamie Pollock
    0

    @Dave formCtrl is not available within the context, would this need to be included in the controller definition?

    @Per sorry, mate. I don't quite follow what you mean by "remind it"? I guess you mean include something in the promise after a $http response (eg then or success). How would I go about reminding it?

    I certainly can remove the val-form-manager directive, however I was wondering if I could take advantage of the Umbraco notifications.

    Thank you both for your responses so far. #h5yr!

  • Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib
    Sep 19, 2014 @ 11:40
    Dave Woestenborghs
    100

    Hi Jamie,

     

    What you need is $scope.nameofyourform.$isdirty= false;

    Dave

  • Jamie Pollock 174 posts 853 karma points c-trib
    Sep 19, 2014 @ 11:49
    Jamie Pollock
    0

    Hi Dave,
    #h5yr! That almost sorted it. Turns out the property is $dirty rather than $isdirty.

    Thanks,
    Jamie

  • Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib
    Sep 19, 2014 @ 12:08
    Dave Woestenborghs
    0

    I was typing the code from memory.

    Nice you sorted it out.

    Dave

  • Per Ploug 865 posts 3491 karma points MVP admin
    Sep 19, 2014 @ 13:30
    Per Ploug
    0

    Cool, you got it sorted, sorry I meant "Rebind it" :) so when you get a success response from $http, you would return the modified object and populate the scope with it, and thereby resetting its dirty state

  • Comment author was deleted

    Sep 19, 2014 @ 13:44

    Thanks, example project has also been updated :)

  • Alain 73 posts 520 karma points c-trib
    Dec 09, 2014 @ 20:32
    Alain
    0

    Hi,

    I have created a new dashboard in Umbraco 7.2.0 and I got the same issue. I don't know if I am missing something or doing something wrong, but your solution doesn't work for me.
    I have also tried the $setPristine() method.

    View:

    
    
    
    <form name="myForm"
        ng-controller="test.dashboard.myForm">
    
        <input type="text" name="textbox" ng-model="data" />
    
        <button ng-click="save()"/>save</button/>
    
    </form>
    ```
    
    

    Controller:

    
    'use strict';
    (function () {
    
        function myForm($scope, angularHelper) {
    
            $scope.data = "";
    
            $scope.save = function () {
                //var currentForm = angularHelper.getCurrentForm($scope);
                //currentForm.$setPristine();
                //if (currentForm.textbox) {
                //    currentForm.textbox.$setPristine();
                //}
                //$scope.myForm.$setPristine();
                //$scope.myForm.textbox.$setPristine();
                //$scope.myForm.textbox.$dirty = false;
                $scope.myForm.$dirty = false;
                console.log('saved');
            };
    
        };
    
        //register the controller
        angular.module("umbraco").controller('test.dashboard.myForm', myForm);
    
    })();
    
    

    Any thoughts?

     

    Thanks,

    Alain

  • Alain 73 posts 520 karma points c-trib
    Dec 10, 2014 @ 13:45
    Alain
    0

    I have seen that the Dashboard form contains the val-form-manager directive, which is causing the issue.

    enter image description here

    Is that really necessary? Wouldn't be better that each form used this directive if they really need it?

  • Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib
    Dec 10, 2014 @ 13:47
    Dave Woestenborghs
    0

    You can create a issue for this at : issues.umbraco.org

    Dave

  • Alain 73 posts 520 karma points c-trib
    Dec 10, 2014 @ 18:37
    Alain
    0

    Hi Dave,

    Someone already created an issue regarding this matter. I have submitted a PR.

    http://issues.umbraco.org/issue/U4-5852

    Cheers,

    Alain

  • Alain 73 posts 520 karma points c-trib
    Dec 11, 2014 @ 12:50
    Alain
    6

    Actually it is not the way to fix it.

    There is a noDirtyCheck directive that should be used on input fields instead of removing the valFormManager directive.

                <input type="text" name="confirmpassword" ng-model="$parent.model.confirm"
                       class="input-large umb-textstring textstring"
                       val-compare="password" no-Dirty-Check/>
    

    Shazwazza, thanks for the clarification.

  • Chris Kim 48 posts 253 karma points c-trib
    Feb 03, 2015 @ 23:06
    Chris Kim
    0

    Perfect Alain, that's exactly what I needed. no-Dirty-Check worked for me.

  • kim Thomsen 59 posts 277 karma points
    Apr 29, 2015 @ 09:19
    kim Thomsen
    0

    #HFYR :) no-Dirty-Check is the bomb

  • Harvey 28 posts 122 karma points
    Oct 07, 2016 @ 15:50
    Harvey
    0

    Hi everyone, I realise that Alain has already mentioned this but I highly recommend using:

    $scope.form.$setPristine();
    

    Rather than:

    $scope.form.$dirty = false;
    

    If you set the form.$dirty to false, it stops the message from appearing when the user tries to navigate away, but should they make another change to the form, the $dirty status will not get reset.

    However, using $setPristine() will.

  • Ian Grainger 71 posts 135 karma points
    Aug 11, 2017 @ 11:29
    Ian Grainger
    0

    Hey all. I'd like to use the 'lose changes' functionality - all I need to do is tell Umbraco once I've saved my data. So I tried calling $setPristine() AND $dirty = false.

    But Umbraco still asks me if I want to save?

    I can check that angular.element($('#myEl')).scope().myFormName.$dirty == false (and $pristine == true) - but I thought that should mean it won't ask me, and it still is? :'-(

    Can anyone give me a tip where to investigate further? I've listed all the form elements on the page and they ALL have the classes: .ng-pristine.ng-valid. Which suggests to me I'm doing it right but it isn't working! Please help!

  • Baha Al Fataftah 4 posts 75 karma points
    Sep 23, 2018 @ 19:07
    Baha Al Fataftah
    0

    Just use no-dirty-check inside your control.

    like this:

    <input class="form-control search-input"
                                   type="text" localize="placeholder"
                                   placeholder="@general_typeToSearch"
                                   ng-model="vm.Options.filter"
                                   ng-change="vm.searchList()"
                                   prevent-enter-submit
                                   no-dirty-check>
    
Please Sign in or register to post replies

Write your reply to:

Draft