validate umb editor property editor

stevo 63 posts 106 karma points

Jul 21, 2015 @ 05:04

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

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...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

validate umb-editor / property editor