2

現時点では、これは私のコードです:

<!doctype html>
<html ng-app="validation-example">
<head>
    <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
    <link href="http://docs.angularjs.org/css/bootstrap.min.css" rel="stylesheet" />
    <link href="http://docs.angularjs.org/css/font-awesome.css" rel="stylesheet" />
    <link href="http://docs.angularjs.org/css/docs.css" rel="stylesheet" />
    <link href="StyleSheet.css" rel="stylesheet" />

    <script src="script.js"></script>
</head>
<body style="background-color: teal">
    <link href="StyleSheet.css" rel="stylesheet" />

    <div ng-controller="Controller">
        <form name="form" class="css-form" novalidate>
            Float:        
          <input type="text" ng-model="length" name="length" smart-float />
            {{length}}<br />
            <span ng-show="form.length.$error.float">This is not a valid float number!</span>
            <br />
            <button ng-click="submit()"
                ng-disabled="form.$invalid">
                Submit</button>
        </form>
    </div>
</body>
</html>

そしてjs

var app = angular.module('validation-example', []);

function Controller($scope) {
    $scope.master = {};

    $scope.reset = function () {
        $scope.user = angular.copy($scope.master);
    };   

    $scope.reset();

    $scope.submit = function () {
        debugger;
        if (form.$invalid)
        {
            alert("sss");
        }
    };
}

var FLOAT_REGEXP = /^\d+((\.|\,)\d+)?$/;
app.directive('smartFloat', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                if (FLOAT_REGEXP.test(viewValue)) {
                    ctrl.$setValidity('float', true);
                    return parseFloat(viewValue.replace(',', '.'));
                } else {
                    ctrl.$setValidity('float', false);
                    return undefined;
                }
            });
        }
    };
});

フロートが無効な場合、ボタンを無効にします。ただし、フォームが無効かどうかを確認し、無効なデータがあるために送信が中断されたことをユーザーに警告するために、関数内のサーバー上で送信ボタンを常に有効にしたいと考えています。クラスバインディングを適用するときに「form.$invalid」を実行できますが、無効な送信を許可するためにそれを削除すると、if (form.$invalid) が定義されていません。フォームに無効な入力がある場合、コントローラーをチェックインする方法は? 要素をループして ng-invalid css クラスをチェックできますが、これは最も馬鹿げた考えなので、スマートな解決策を提案してください。

4

1 に答える 1