validate umb editor property editor - Developing Umbraco 7 packages

stevo 63 posts 106 karma points

Jul 21, 2015 @ 05:04

validate umb-editor / property editor

Developing Umbraco 7 packages

Umbraco 7

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

Copy Link

stevo 63 posts 106 karma points

Jul 22, 2015 @ 21:55

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

Copy Link

is working on a reply...

Flag this post as spam?

validate umb-editor / property editor