現時点では、これは私のコードです:
<!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 クラスをチェックできますが、これは最も馬鹿げた考えなので、スマートな解決策を提案してください。