1
私は1つのフォームを持っているアプリケーションで作業していますが、誤った入力で入力フィールドの検証エラーメッセージが表示されるはずです。アングル：サブミット時のNGメッセージ検証
は私のフォームは次のようになります -
を場合は、エラーメッセージが表示されるはずです - 間違った入力
- 入力フィールドには、[送信]ボタンをせずにクリック必要な入力フィールドの変更。
それは以下のようにエラーメッセージを表示する必要があります - 私はNG-message指令を使用していますこれを実現するために
。入力フィールドの$ dirtyにエラーメッセージを表示するのに役立ちます。しかしSubmitボタンでは正しい方法を見つけることができませんでした。現在、私はクリックを送信すると変更されるフラグを使用しています。しかし、私はよりよいアプローチに興味があります。これを達成するための事前定義された方法がありますか？
私が試した完全な例はここにあります。同じものはplunkrです。
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular-messages.js"></script>
<script>
var app = angular.module('myApp', ['ngMessages']);
app.controller('myCtrl', function($scope) {
$scope.submitForm = function() {
$scope.submitted = true;
if (myForm.$valid) {
alert('Form submitted with passed validation');
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="myForm" novalidate ng-submit="submitForm()">
<label>
Enter your name:
<input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
</label>
<div ng-if="submitted || myForm.myName.$dirty" ng-messages="myForm.myName.$error" style="color:red" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
<br>
<br>
<label>
Enter your phone number:
<input type="number" name="myPhone" ng-model="phone" ng-maxlength="20" required />
</label>
<div ng-if="submitted || myForm.myPhone.$dirty" ng-messages="myForm.myPhone.$error" style="color:red" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
<br>
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>
ありがとうございます！
あなたがフォームの$submittedを使用することができます
あなたは 'あるmyFormを使用することができます。$ submitted' – Sravan
あなたは、角2フォームの検証手法を使用していないのはなぜ。あなたがangualr 2を使用している場合、https://scotch.io/tutorials/angular-2-form-validation – Harshakj89
@ Harshakj89、彼はangular2ではなく、「angular1.5.0」を使用しています。 – Sravan