angularjs select number type default value required validate

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div ng-app="app" ng-controller="controller">
        <form name="form" novalidate>
            <div class="form-group" ng-class="{ 'has-error': form.value.$invalid }">
                <label for="exampleInputEmail1">select</label>
                <!--http://stackoverflow.com/questions/32304519/ng-pattern-regex-to-allow-all-characters-except-decimal-value-->
                <select class="form-control" ng-model="item.value" name="value" convert-to-number ng-pattern="/^(?!0$).*/" required>
                    <option value="0" disabled>please choose a number</option>
                    <option ng-repeat="option in [1,2,3,4,5]" value="{{option}}">{{option}}</option>
                </select>
                <span ng-show="form.value.$error.required" class="err-msg">required</span>
                <span ng-show="form.value.$error.pattern" class="err-msg">pattern</span>
            </div>
            <button type="button" class="btn btn-default" ng-click="submit(form)">submit</button>
        </form>
    </div>
    <script src="http://cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
    <script>
        'use strict';

        var app = angular.module('app',[])

        app.controller('controller',function ($scope) {
            $scope.item = {
                value: 0,}
            $scope.submit = function (form) {
                if (!form.$valid) {
                    return
                }
                alert(JSON.stringify($scope.item))
            }
        })

        //http://stackoverflow.com/a/35407627/2586541
        app.directive('convertToNumber',function () {
            return {
                require: 'ngModel',link: function (scope,element,attrs,ngModel) {
                    //value
                    ngModel.$parsers.push(function (val) {
                        //return '' + val;
                        return parseInt(val,10);
                    });
                    //show
                    ngModel.$formatters.push(function (val) {
                        //return parseInt(val,10);
                        return '' + parseInt(val || 0,10);
                    });
                }
            };
        });
    </script>
</body>
</html>
angularjs select number type default value required validate

猜你在找的Angularjs相关文章
