반응형
ngpattern을 사용하여 자연 입력 번호 확인
사용하고 있다ng-pattern="/0-9/"
세팅하다price_field
받아들이지 않다decimal number
그런데 자연수(0~99999)를 입력하면ng-show
로 활성화되다Not valid number!
.
어디서부터 제가 잘못했을까요?.제발 도와주세요.
<form name="myform" data-ng-submit="create()">
<input type="number"
name="price_field"
data-ng-model="price"
require
ng-pattern="/0-9/">
<span ng-show="myform.price_field.$error.pattern">Not valid number!</span>
<input type="submit" class="btn">
</form>
문제는 REGX 패턴이 입력 "0-9"에만 일치한다는 것입니다.
요건(0~99999)을 충족시키려면 regx 패턴을 다시 작성해야 합니다.
ng-pattern="/^[0-9]{1,7}$/"
예:
HTML:
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
<input type="number" ng-model="price" name="price_field"
ng-pattern="/^[0-9]{1,7}$/" required>
<span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span>
<span ng-show="myForm.price_field.$error.required">This field is required!</span>
<input type="submit" value="submit"/>
</form>
</div>
JS:
function formCtrl($scope){
$scope.onSubmit = function(){
alert("form submitted");
}
}
여기 jsFiddle 데모가 있습니다.
잘 되고 있다
<form name="myform" ng-submit="create()">
<input type="number"
name="price_field"
ng-model="price"
require
ng-pattern="/^\d{0,9}(\.\d{1,9})?$/">
<span ng-show="myform.price_field.$error.pattern">Not valid number!</span>
<input type="submit" class="btn">
</form>
<label>Mobile Number(*)</label>
<input id="txtMobile" ng-maxlength="10" maxlength="10" Validate-phone required name='strMobileNo' ng-model="formModel.strMobileNo" type="text" placeholder="Enter Mobile Number">
<span style="color:red" ng-show="regForm.strMobileNo.$dirty && regForm.strMobileNo.$invalid"><span ng-show="regForm.strMobileNo.$error.required">Phone is required.</span>
다음 코드는 전화번호 확인에 도움이 될 것이며 존중되는 지시는
app.directive('validatePhone', function() {
var PHONE_REGEXP = /^[789]\d{9}$/;
return {
link: function(scope, elm) {
elm.on("keyup",function(){
var isMatchRegex = PHONE_REGEXP.test(elm.val());
if( isMatchRegex&& elm.hasClass('warning') || elm.val() == ''){
elm.removeClass('warning');
}else if(isMatchRegex == false && !elm.hasClass('warning')){
elm.addClass('warning');
}
});
}
}
});
언급URL : https://stackoverflow.com/questions/19827570/validate-natural-input-number-with-ngpattern
반응형
'programing' 카테고리의 다른 글
JSON 개체를 구문 분석하는 동안 NoClassDefFoundError JsonAutoDetect가 발생했습니다. (0) | 2023.03.18 |
---|---|
Wordpress - 편집기에 html/텍스트 삽입 (0) | 2023.03.18 |
Angular 2 Form Group에서 모든 검증 오류를 가져옵니다. (0) | 2023.03.08 |
변경의 원인이 되는 클릭 이벤트와 관련된 ng-repeat 항목을 애니메이션화하는 방법 (0) | 2023.03.08 |
ng-upload를 사용하여 이미지를 업로드하는 AngularJS (0) | 2023.03.08 |