Как динамически связать данные шаблона регулярного выражения из db в угловых js - PullRequest
Новая
       27

Как динамически связать данные шаблона регулярного выражения из db в угловых js

0 голосов
/ 24 сентября 2018

У меня проблема при проверке формы. Это динамическая форма, в которой значения полей, тип и шаблон проверки полей поступают из БД MS SQL.Данные будут сгенерированы как JSON через api и сохранены в $ scope.entity = {fields: response.data;}

При динамическом связывании данных в angularJS {{field.RegexName}} оно связывает его как строку, а шаблон не проверяется.

<ng-form name="form">

                                    <div ng-if="field.FieldDataType=='text' && field.isActive" ng-disabled="!field.isActive" class="form-group left">
                                        <label>{{field.FieldDescription}}   </label>
                                        <div>

                                            <input type="{{field.FieldDataType}}" id="{{field.fieldId}}" name="{{field.FieldDataType}}" data-ng-model="field.DataType" class="form-control" ng-pattern="regex" ng ng-required="{{field.isRequired}}" />
                                            <span data-ng-show= "{{'form.'+ field.FieldDataType +'.$dirty' && 'form.'+ field.FieldDataType +'.$error.required' }}">Required!</span>
                                            <span style="color : red" data-ng-show="{{'form.'+field.FieldDataType+'.$error.pattern'}} "> Pattern not matched</span>
                                        </div>
                                    </div>

                                    <div ng-if="field.FieldDataType=='password' && field.isActive" ng-disabled="!field.isActive" class="form-group left">
                                        <label>{{field.FieldDescription}}</label>
                                        <div>
                                            <input data-ng-model="field.DataType" name="{{field.FieldDataType}}" type="{{field.FieldDataType }}" id="{{field.fieldId}}" class="form-control" ng-pattern="{{field.RegexPattern}}" ng-required="{{field.isRequired}}" />
                                            <span ng-show="{{'myForm.'+ field.FieldDataType +'.$dirty' && 'myForm.'+ field.FieldDataType+'.$error.required'}}">Required!</span>
                                            <span data-ng-show ="{{'form.'+field.FieldDataType+'.$error.pattern'}}"> {{field.RegexErrMsg}} </span>
</div>
</div>[enter image description here][1]


    var app = angular.module('myDynamicApp', []);
app.controller('DynamicFormController', ['$scope', '$http', '$sce', function ($scope, $http, $sce) {
    $scope.regexP = $sce.trustAsHtml($scope.regex);

    $http.get("api/formfieldcontroller/getOptionsForField/").then(function (response) {
        $scope.entity = { fields: response.data };


        console.log($scope.entity);
        console.log($scope.regexP);


    });

    $scope.regex = /^[a-zA-Z]*-*$/;

    // $scope.entity = { fields: crudService.getAllFieldData }
    $scope.testtest = function (test) {
        alert(test);
    };
    $scope.submitForm = function () {
        console.log($scope.entity);
    };

    $http.get("api/formfieldcontroller/getFieldOptions/").then(function (response) {
        $scope.optionFields = { fields: response.data };

    });


    console.log($scope.Regex);

    this.delete = function (filedId) {
        var request = $http({
            method: "delete",
            url: "api/formfieldcontroller/DeleteFields/" + filedId
        });
        return request;
    };
}]).directive("dynamicName", function ($compile) {
    return {
        restrict: "A",
        terminal: true,
        priority: 1000,
        link: function (scope, element, attrs) {
            element.attr('name', scope.$eval(attrs.dynamicName));
            element.removeAttr("dynamic-name");
            $compile(element)(scope);
        }
    }
}).filter('trustHtml', [
        '$sce',
        function ($sce) {
            return function (value) {
                return $sce.trustAs('html', value);
            }
        }
]);
app.directive('regexValidate', function () {
    return {

        restrict: 'A',

        require: 'ngModel',

        link: function (scope, elem, attr, ctrl) {


            var flags = attr.regexValidateFlags || '';


            var regex = new RegExp(attr.regexValidate, flags);

            // add a parser that will process each time the value is 
            // parsed into the model when the user updates it.
            ctrl.$parsers.unshift(function (value) {
                // test and set the validity after update.
                var valid = regex.test(value);
                ctrl.$setValidity('regexValidate', valid);

                // if it's valid, return the value to the model, 
                // otherwise return undefined.
                return valid ? value : undefined;
            });

            // add a formatter that will process each time the value 
            // is updated on the DOM element.
            ctrl.$formatters.unshift(function (value) {
                // validate.
                ctrl.$setValidity('regexValidate', regex.test(value));

                // return the value or nothing will be written to the DOM.
                return value;
            });
        }
    };
});

IMG1

GitRepo

...