Copied to clipboard

Flag this post as spam?

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


  • Carson Brown 15 posts 85 karma points
    Jun 20, 2016 @ 19:15
    Carson Brown
    0

    Setting Form on Custom Tab to Pristine

    I've added a tab to my umbraco back office home page that allows you to edit a config file from the back office. After the form is saved, I would like the form to keep the value but be set pristine instead of staying as dirty, since leaving the page now makes the "you have unsaved changes" tab open. Currently, my code looks like: HTML:

    <div ng-controller="rewriteConfigTabController">
    <form novalidate name="rewriteForm">
        <div>
            <h3><strong>Rewrite Config</strong></h3>
            <div>Use this to change the rewrite maps for Clark Marketing. Remember to build after making changes!</div><br />
            <div>You will need to add a rule for your site to the rewrite section of Web.config.</div><br />
        </div>
        <div name="success" ng-show="successText != null" class="alert alert-success property-error ng-binding">{{successText}}</div>
        <div name="errors" ng-show="errorText != null" class="alert alert-error property-error ng-binding">{{errorText}}</div>
        <textarea id="rewriteEditor" ng-model="configText" rows="30" cols="150"></textarea><br />
        <umb-button type="button" action="save(configText)" label="Save" button-style="success"></umb-button>
    </form>
    

    Validation where we would be setting it to pristine:

    function validateTextboxXml(text,scope) {
    var Module = {
        xml: text,
        schema: xmlSchema,
        arguments: ["--noout", "--schema", "xml", "schema"]
    };
    var errors = validateXML(Module);
    if (errors.substring(0, 16) == 'schema validates') {            //errors == "schema validates\n" when this is true
        scope.successText = "Rewrites updated.";
        scope.errorText = null;
        scope.rewriteForm.$pristine = true;
        scope.rewriteForm.$dirty = false;
        return true;
    }
    else {
        scope.errorText = errors;
        scope.successText = null;
        return false;
    }
    

    }

    When this runs the form is still dirty after going through. Any help would be appreciated, Thanks. Carson

  • David Brendel 792 posts 2970 karma points MVP 3x c-trib
    Jun 21, 2016 @ 14:49
    David Brendel
    0

    Hi Carson,

    I'm using this call to clear the form: $scope.organiserForm.$setPristine();

    Where "organiserForm" should be the name of your Form.

    Regards David

  • Markus Johansson 1930 posts 5858 karma points MVP 2x c-trib
    Feb 19, 2020 @ 13:31
    Markus Johansson
    0

    Just in case someone is looking for a solution for this when having a form inside a dashboard in Umbraco 8.

    Turns out that all tabs in the any dashboard are wrapped in a

    so this

    $scope.organiserForm.$setPristine();
    

    Would only set your own form to Pristine but it would leave the wrapping "dashboardForm" as dirty hence showing the confirmation. To get around this you need to set both forms as Pristine

    $scope.organiserForm.$setPristine(); // reset my own form
    $scope.dashboardForm.$setPristine(); // reset wrapping form
    

    Hope this helps anyone having the same issue.

  • Thomas 319 posts 606 karma points c-trib
    Oct 01, 2020 @ 08:41
    Thomas
    0

    I have some issue setting Pristine..

    I'm reusing rich text editor with this:

    <div class="editorcomment" ng-controller="Cabana.EditorComment as vm">
    <umb-box>
        <umb-box-header title="Kommentarer"></umb-box-header>
        <umb-box-content>
            <div class="add-comment">
                <h5>Ny Kommentar</h5>
                <ng-form id="commentform" name="commentForm">
                    <umb-property-editor model="rte"></umb-property-editor>
                </ng-form>
    
                <a class="btn btn-primary" ng-click="saveComment()">Save</a>
            </div>
        </umb-box-content>
    </umb-box>
    

    $scope.rte = {
        view: 'rte',
        config: {
            editor: {
                toolbar: ["code", "undo", "redo", "bold", "italic", "bullist"],
                dimensions: { height: 200, width: 800 }
            }
        }
    };
    

    I have tried diffrent stuff to set pristine.. But it's not working. Can you help me ?

    $scope.rte.$setPristine();
        $scope.commentForm.$setPristine(); // reset my own form
        $scope.dashboardForm.$setPristine(); // reset wrapping form
    
  • Markus Johansson 1930 posts 5858 karma points MVP 2x c-trib
    Oct 01, 2020 @ 17:21
    Markus Johansson
    1

    Hi Thomas!

    I haven't done this with the RTE on V8 but on V7 it did work with settings the whole form to pristine.

    I guess that you're settings it to pristine after the changes has been made? ie. in a click handler or something? You need to set the form to pristine and after this there can't be any more changes as this would make it dirty again.

    You can always inspect the DOM and see what element that is still dirty (will have a class="ng-dirty" and maybe this would give a hint on why the form is not set as pristine.

    You can always have a look in the Umbraco-source: https://github.com/umbraco/Umbraco-CMS/tree/v8/contrib/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte

  • Thomas 319 posts 606 karma points c-trib
    Nov 02, 2020 @ 12:33
    Thomas
    0

    Still havn't got it to work.. :P

    Can't get the form..

    <ng-form id="commentform" name="commentForm" >
                    <umb-property-editor name="test" model="rte" ></umb-property-editor>
                </ng-form>
    

    Not by name or id.. Always get undefined..

  • Ulf Möllerström 70 posts 247 karma points
    Apr 14, 2021 @ 09:54
    Ulf Möllerström
    0

    @Thomas

    Ever found a solution for this?

    Edit: one "issue" is the scope of the... "$scope", or when trying to get the form before the controller is executed(?). (I'm not an Angular-developer!)

  • Thomas 319 posts 606 karma points c-trib
    Apr 14, 2021 @ 10:23
    Thomas
    1

    Sadly no.. Ended up not using the rich text for now.

  • Ulf Möllerström 70 posts 247 karma points
    Apr 14, 2021 @ 10:30
    Ulf Möllerström
    1

    Ok, I'll try to get to it.

    Can reference my "own" form (it's in a content app, and I now think I know why Umbraco advices from not having controls in one!), and can set the status $dirty to false, but the entire node editor seems to get $dirty == true and I can not reference this form.

    Well, well...

  • Thomas 319 posts 606 karma points c-trib
    Apr 19, 2021 @ 13:06
    Thomas
    0

    Did you find a solution ? :)

  • Ulf Möllerström 70 posts 247 karma points
    Apr 19, 2021 @ 18:12
    Ulf Möllerström
    0

    Hi Thomas,

    I'm trying to get this to work (similar issue): https://our.umbraco.com/forum/using-umbraco-and-getting-started/105674-content-app-triggering-unsaved#comment-105674

    And this is where I left off at end of last week: https://our.umbraco.com/forum/using-umbraco-and-getting-started/105674-content-app-triggering-unsaved#comment-329751

    Since tracking changes in my form myself (sort of), the argument $scope.authForm.$setPristine() isn't necessary, and doesn't affect the status of the surrounding form.

Please Sign in or register to post replies

Write your reply to:

Draft