Copied to clipboard

Flag this post as spam?

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


  • stevo 63 posts 106 karma points
    Jul 21, 2015 @ 05:04
    stevo
    0

    validate umb-editor / property editor

    Hi,

    I'm developing a extension for Umbraco. I'm struggle with the validation from the property editors from Umbraco. I'm using the follow types:

    • datepicker
    • dropdown
    • textbox

    How can I validate these fields? They should be all mandatory. I guess, the best case scenario would be if I could use the Umbraco mechanisms for the validation.

    edit view

    <div ng-controller="Mayhem.FooEditController as vm">
        <form novalidate name="form" val-form-manager>
            <umb-panel ng-class="'editor-breadcrumb'">
                <umb-header tabs="vm.tabs">
                    <div class="span7">
                        <umb-content-name placeholder="@placeholders_entername" ng-model="content.name"/>
                    </div>
                    <div class="span5">
                        <div class="btn-toolbar pull-right umb-btn-toolbar">
                            <a href="" class="btn btn-success" ng-click="vm.save()">
                                <localize key="buttons_save">[buttons_save]</localize>
                            </a>
                        </div>
                    </div>
                </umb-header>
                <umb-tab-view>
                    <umb-tab id="tab1" rel="tab1">
                        <div class="umb-pane">
                            <umb-property property="property" ng-repeat="property in vm.properties">
                                <umb-editor model="property"></umb-editor>
                            </umb-property>
                        </div>
                    </umb-tab>
                </umb-tab-view>
            </umb-panel>
        </form>
    </div>
    

    angular controller:

    var Mayhem;
    (function (Mayhem) {
        "use strict";        
        var FooEditController = (function () {
            function FooEditController($routerParams) {
                this.$routerParams = $routerParams;
                this.tabs = [{ id: 1, label: "Content" }];
                this.properties = this.getEditProperties();
            }
            FooEditController.prototype.getEditProperties = function () {
                const list = [];
                const seriesControl = new models.Property();
                seriesControl.label = "Series";
                seriesControl.description = "a description...";
                seriesControl.view = "dropdown";
                seriesControl.config = { items: [{ "id": 1, "value": "bar" }, { "id": 2, "value": "foo" }] };
                seriesControl.hideLabel = false;
                seriesControl.alias = "series";
                seriesControl.validation.mandatory = true;
                console.log("seriesControl", seriesControl);
                list.push(seriesControl);
    
                const stage = new models.Property();
                stage.label = "Stage";
                stage.description = "a description...";
                stage.view = "textbox";
                stage.config = null;
                stage.hideLabel = false;
                stage.validation.mandatory = true;
                stage.alias = "stage";
                list.push(stage);
    
                const date = new models.Property();
                date.label = "Date";
                date.description = "a description...";
                date.view = "datepicker";
                date.config = { pickTime: false, format: "YYYY-MM-DD" };
                date.hideLabel = false;
                date.validation.mandatory = true;
                date.alias = "date";
                list.push(date);
                return list;
            };
            FooEditController.prototype.save = function () {
                // this.properties -> list of properties...
                // validation...
                // save
            };
            FooEditController.$inject = ["$routeParams"];
            return FooEditController;
        })();
        angular.module("mayhem").controller("Mayhem.FooEditController", FooEditController);
    })(Mayhem || (Mayhem = {}));
    

    Our help would be greatly appreciated,

    Thanks Stefan

  • stevo 63 posts 106 karma points
    Jul 22, 2015 @ 21:55
    stevo
    0

    Hi,

    so I end up writing everything be myself. I share with you my solution for those interested in

    view:

    <form name="raceForm"
          ng-controller="Mayhem.Race.NewRaceController"
          novalidate
          ng-show="vm.loaded"
          ng-submit="vm.save()"
          val-form-manager>
        <umb-panel>
            <umb-header tabs="vm.tabs">
                <div class="span7">
                    <div class="umb-headline-editor-wrapper span7">
                        <input type="text" name="name" localize="placeholder" class="umb-headline" select-on-focus placeholder="Please enter a name..." ng-model="vm.raceName" required>
                        <div ng-show="(vm.submitted || raceForm.name.$dirty) && raceForm.name.$invalid">
                            <span class="help-inline" ng-show="raceForm.name.$error.required"><localize key="mayhem_required">[Required]</localize></span>
                        </div>
                    </div>
                </div>
    
                <div class="span5">
                    <div class="btn-toolbar pull-right umb-btn-toolbar">
                        <button type="submit" data-hotkey="ctrl+s" class="btn btn-success">
                            <localize key="buttons_save">Save</localize>
                        </button>
                    </div>
                </div>
            </umb-header>
    
            <umb-tab-view>
                <umb-tab id="tabContent" rel="Content">
                    <umb-pane>
                        <umb-control-group label="Race series" description="Choose the the race series">
                            <select name="series" class="umb-editor umb-dropdown" ng-model="vm.series" ng-options="c.value for c in vm.seriesList" required></select>
                            <div ng-show="(vm.submitted || raceForm.series.$dirty) && raceForm.series.$invalid">
                                <span class="help-inline" ng-show="raceForm.series.$error.required"><localize key="mayhem_required">[Required]</localize></span>
                            </div>
                        </umb-control-group>
    
                        <umb-control-group label="Race track" description="The name of the race track">
                            <input name="raceTrack" type="text" class="umb-editor umb-textstring" ng-model="vm.raceTrack" required/>
                            <div ng-show="(vm.submitted || raceForm.raceTrack.$dirty) && raceForm.raceTrack.$invalid">
                                <span class="help-inline" ng-show="raceForm.raceTrack.$error.required"><localize key="mayhem_required">[Required]</localize></span>
                            </div>
                        </umb-control-group>
    
                        <umb-control-group label="Date" description="The date of the race">
                            <div class="input-append" mh-date-picker="date">
                                <input name="date" type="text" ng-model="vm.date" placeholder="YYYY-MM-DD" required mh-is-date>
                                <span class="add-on"><i class="icon-calendar"></i></span>
                            </div>
                            <div id="date-error" ng-show="(vm.submitted || raceForm.date.$dirty) && raceForm.date.$invalid">
                                <span class="help-inline" ng-show="raceForm.date.$error.required"><localize key="mayhem_required">[Required]</localize></span>
                                <span class="help-inline" ng-show="raceForm.date.$error.invalidDate"><localize key="mayhem_invalidDate">[Invalid date]</localize></span>
                            </div>
                        </umb-control-group>
                    </umb-pane>
                </umb-tab>
            </umb-tab-view>
        </umb-panel>
    </form>
    

    angular controller:

    var Mayhem;
    (function (Mayhem) {
        "use strict";   
        var FooController = (function () {
            function FooController($scope, notificationsService) {          
                this.$scope = $scope;           
                this.notificationsService = notificationsService;           
                $scope.vm = this;
                this.tabs = [{ id: 1, label: "Content" }];          
                this.loaded = true;
            }
    
            FooController.prototype.save = function () {
                this.submitted = true;
    
                if (this.$scope.raceForm.$valid) {              
                    this.notificationsService.success("Success", "Yeah ...");
                    console.log("this.raceName", this.raceName);
                    console.log("this.series", this.series);
                    console.log("this.raceTrack", this.raceTrack);
                    console.log("this.date", this.date);
                }
                else {              
                    this.notificationsService.error("Form error", "Please fill out all the required fields");
                }
            };
            FooController.$inject = ["$scope", "notificationsService"];
            return FooController;
        })();
        angular.module("mayhem").controller("Mayhem.FooController", FooController);
    })(Mayhem || (Mayhem = {}));
    

    cheers, Stefan

Please Sign in or register to post replies

Write your reply to:

Draft