1
하나의 양식이있는 응용 프로그램에서 작업 중이며 잘못된 입력시 입력 필드에 대한 유효성 검사 오류 메시지가 표시되어야합니다.각도 : 제출 클릭시 ng-message 유효성 확인
내 양식은 다음과 같이 표시됩니다 -
경우 오류 메시지가 표시되어야합니다 -
- 입력 필드 필요한 입력 필드의 수정.
그것은 다음과 같이 오류 메시지가 표시되어야합니다 -
내가 NG 메시지 지시어를 사용하고이를 달성하기 위해. 입력 필드의 $ dirty에 오류 메시지를 표시하는 데 도움이 될 것입니다. 하지만 제출 버튼에 대한 올바른 방법을 찾을 수 없습니다. 현재 제출 클릭시 수정할 깃발을 사용 중입니다. 그러나 나는 더 나은 접근법에 관심이있다. 이를 달성하는 데 사용할 수있는 미리 정의 된 방법이 있습니까?
여기에 제가 시도한 전체 예제가 있으며, 여기에 대해서는 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.0이 아닌 'angular1.5.0'을 사용하고 있습니다. – Sravan