Angular Forms: Validation

https://app.pluralsight.com/library/courses/angular-forms/table-of-contents

위 강좌를 보며 실습.

이번엔 중요한 Validation이다.

HTML5 필드 검증(브라우저의 기본 기능 활용)

일단 데이터를 null로 초기화

본래라면 꺼져 있는 브라우저 자체의 검증 기능을 ngNativeValidate 스위치로 다시 켬.

폼에 required 옵션을 추가하니 Send 버튼을 눌렀을 때 입력해달라는 경고가 나타난다.

pattern에서 정규식 표현을 넣어서 이와 일치하는지 확인 가능.

그 외에도 minlength나, maxlength,

간단히 입력 타입 검사와 범위 지정도 가능.

CSS 클래스에 의한 검증

입력 상자에 #classTest라고 이름붙이고 required 속성을 준 뒤, classTest를 출력하면

form-control ng-untouched ng-pristine ng-invalid

라고 나타난다.

이름 필드를 클릭하고 탭을 누른 뒤, 다시 클릭하면 ng-untouched가 ng-touched로 바뀜.

(새로고침)내용을 입력하면 ng-pristine이 ng-dirty로 바뀜.

참고로 pristine이란… 오염되지 않은(?) 초기 상태를 뜻함.

pris·tine

1.완전 새 것 같은, 아주 깨끗한   2.자연 그대로의, 오염되지 않은

https://en.dict.naver.com/#/entry/enko/476b466455a04360ad13dd1cbb389ee8

(새로고침)require 속성이 있으므로 최초 ng-invalid 이지만,

required를 제거하여 재실행하면

처음부터 ng-valid 인 것을 볼 수 있다.

minlength를 3으로 주고,

두 글자만 입력하면 ng-invalid가 된다.

이것도 살펴보세요!

Flutter: 이전 화면에 데이터 반환하기(Return data from a screen)

Navigator.push로 보낸 정보를 final result에 저장하여 해당 result를 snackbar에 표시하는 예제. /// 선택된 정보를 홈 …

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다