여기 입력하는 내용은 id 라는 이름의 모델로 지정을 하고
반드시 입력을 해야 한다는 의미임
입력은 안하면 false
뭔가 입력을 하면 true
$valid 는 유효한지 여부
이걸 이용해서 뭔가 작업을 할수 있어
이렇게 코딩하면
뭔가를 입력하라고 알림을 줄수 있어
( from 밑에 p 요소는 true / false 확인하려고 둔 것 )
입력은 안하면 입력하라고 뜨고
뭔가 입력을 하면 사라짐
이렇게 ng-disabled 해주면
버튼이 비 활성화 가 됌
false 로 바꾸면 버튼이 동작함
false 인 상태로 가입을 누르면
뭔가 알림창이 뜨는데
이건 angular 가 해주는 것이 아니라 html5를 지원해주는 웹브라우저가 해주는 것임
이게 뜨면 혼돈이 오기 때문에
from 에 novalidate 해주면 저 알림이 안뜨고 폼이 제출되어지는 것을 확인 할 수 있다.
이제 버튼을 아이디가 있으면 동작하게 해야해
valid 가 있으니 invalid 도 있어
이렇게 해주면 유효하지 않으면 버튼이 동작을 안하고 유효하면 버튼이 동작함
반드시 입력하세요 에 invalid 해주고 css 입혀주면
이렇게 되는데 페이지 로딩하자마자 입력안했다고 빨간색으로 쫙~ 뜨면 보기 싫으니까
옵션을 하나 더 줘야함
더럽혀 졌는지 여부를 확인 할수 있어
dirty 는 처음에는 false 인데 한번 입력을 하면 true 로 바뀌고
입력한걸 지워도 한번이라도 입력을 했으면 true 로 되어 있어
비밀번호 갯수 제한을 주기 위해서
이렇게 해주고 실행시켜 보면
이렇게 확인 가능하다
dirty의 반대로 pristine도 있음
이런 형식으로 form validation 적용한 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Step05_form2</title> <link rel="stylesheet" href="css/bootstrap.css"/> <script src="js/angular.min.js"></script> </head> <body> <div class="container"> <form action="signup" name="myForm" novalidate> <div class="form-group has-feedback" ng-class="{'has-success':myForm.id.$valid ,'has-error': myForm.id.$invalid && myForm.id.$dirty }"> <label>아이디</label> <input type="text" class="form-control" name="id" ng-model="id" ng-required="true"/> <span class="form-control-feedback glyphicon glyphicon-ok" ng-show="myForm.id.$valid"></span> <span class="form-control-feedback glyphicon glyphicon-remove" ng-show="myForm.id.$invalid && myForm.id.$dirty"></span> <p class="help-block" ng-show="myForm.id.$invalid && myForm.id.$dirty">반드시 입력하세요</p> </div> <div class="form-group has-feedback" ng-class="{'has-success':myForm.nick.$valid ,'has-error': myForm.nick.$invalid && myForm.nick.$dirty }"> <label>별칭</label> <input type="text" class="form-control" name="nick" ng-model="nick" ng-required="true" ng-minlength="5" ng-maxlength="10" ng-pattern="/^[a-zA-Z]+$/"/> <span class="form-control-feedback glyphicon glyphicon-ok" ng-show="myForm.nick.$valid"></span> <span class="form-control-feedback glyphicon glyphicon-remove" ng-show="myForm.nick.$invalid && myForm.nick.$dirty"></span> <p class="help-block" ng-show="myForm.nick.$error.minlength">5글자 이상 입력하세요</p> <p class="help-block" ng-show="myForm.nick.$error.maxlength">10글자 이하 입력하세요</p> <p class="help-block" ng-show="myForm.nick.$error.pattern">영문자만 가능합니다.</p> </div> <button ng-disabled="myForm.$invalid" class="btn btn-primary">가입</button> </form> <p>myForm.id.$valid={{myForm.id.$valid}}</p> <p>myForm.id.$invalid={{myForm.id.$invalid}}</p> <p>myForm.id.$pristine={{myForm.id.$pristine}}</p> <p>myForm.id.$dirty={{myForm.id.$dirty}}</p> </div> </body> </html> | cs |
'FrameWork > AngularJS' 카테고리의 다른 글
| AngularJS event (0) | 2017.08.29 |
|---|---|
| AngularJS Anmation (0) | 2017.08.28 |
| Step04_showHide (0) | 2017.08.25 |
| Step03_class (0) | 2017.08.25 |
| Step02_controller2 (0) | 2017.08.25 |
