최근에 보관 된 구성 요소의 나머지 버그는 양식 검증이며 회사의 양식 검증 코드 내부의 논리는 세대에 불분명했으며 코드 구조는 그다지 각도가 아닙니다.
양식 검증에 대한 심층적 인 이해가 필요합니다.
<body ng-controller = "maincontroller"> <form name = "form"novalidate = "novalidate"> <input name = "text"type = "email"ng-model = "name"> </form> </body>
Ngmodel은 각도 흑 마법으로 양방향 바인딩을 실현합니다. 이름의 값이 변경되면 입력 값도 변경됩니다.
사용자 입력이 값을 변경하면 이름의 값도 변경됩니다.
novalidate = "novalidate"의 목적은 시스템과 함께 제공되는 양식 검증을 제거하는 것입니다.
위의 코드를 구문 분석 한 후 Angular는 MainController의 $ 범위에서 변수 "양식"및 $ scope.form을 생성합니다. 이 변수의 이름은 HTML의 Form.Name과 동일합니다.
그리고 $ scope.form.text는 ngmodelController에서 상속 된 텍스트 입력 상자의 모델입니다.
여기서 $ scope.form 인스턴스는 FormController에서 나온 것입니다. 그 내용은 다음과 같습니다.
텍스트 입력 상자의 모델 (즉, $ scope.form.text)은 다음과 같습니다.
$ dirty/$ ristine, $ valid/$ invalid, $ error는 일반적인 속성입니다. 특히 $ 오류.
가장 쉬운 양식 검증 :
양식 및 입력 상자를 이해 한 후 먼저 가장 간단한 명령을 편집하여 오류를 표시 할 수 있습니다.
HTML 컨텐츠는 다음과 같습니다.
<form name = "form"novalidate = "novalidate"> <input name = "text"type = "email"ng-model = "name"error-tip> </form>
명령 코드는 다음과 같습니다.
// 입력 상자 오류가 발생하면 오류가 표시됩니다 ( "errortip", function ($ compile) {return {return {reterict : "a", 요구 사항 : "ngmodel", inturns : inturns : inturns : inturns : inture ($ scope, $ element, $ attrs, $ ngmodel) {// subscope subscope = $ scope = $ scop ()가 표시 될 때, // // ng-if = "haserror ()"> {errors () | json}} <// 더럽고 무효. {이메일 : true, xxx : true, xxxx : xxxx : trie} $ scope.errors = function () {return $ ngmodel. $ error;} // 잘못된 명령을 컴파일하고 $ element.after ($ compile (tip) (subscope));}})에 입력 상자에 넣습니다.먼저 실행 결과를 살펴 보겠습니다.
잘못된 이메일 주소를 입력 할 때 :
올바른 이메일 주소를 입력 할 때 :
errortip 지시문은 요구 사항 : "ngmodel"을 통해 ngmodelcontroller를 얻음으로써 시작됩니다. 그런 다음 오류를 입력 상자에 표시 할 요소를 작성하십시오.
$ Compile은 여기에서 사용되며 $ Compile은 HTML 컨텐츠를 동적으로 컴파일하고 표시하는 데 사용됩니다.
오류 내용이 있으면 잘못된 요소가 표시됩니다.
Subscope에 액세스 할 수있는 이유는 무엇입니까?
프로토 타입 체인으로 인해. 아래 그림을보십시오.
오류 컨텐츠를 사용자 정의합니다
자, 양식 검증을 지금 사용할 수 없다는 것은 분명합니다. 표시 할 오류 컨텐츠를 사용자 정의해야하며 하나 이상의 오류가 표시됩니다.
NG-Repeat를 사용하여 여러 오류를 표시합니다. 즉, "errortip"명령을 사용하십시오.
tip = '<span ng-if = "haserror ()"> {errors () | json}} </span> ';변경 :
tip = '<ul ng-if = "haserror ()"ng-repeat = "(errorkey, errorvalue) errors ()">' +'<span ng-if = "errorvalue"> {{errorkey | errorfilter}} </span> ' +'</ul> ';여기서 ErrorFilter는 오류 메시지의 사용자 정의 표시를위한 필터입니다. 필터는 실제로 기능입니다.
코드는 다음과 같습니다.
.filter ( "errorfilter", function () {return function (encut) {var errormessagesmap = {이메일 : "올바른 이메일 주소를 입력하십시오", xxoo : "returnessagesmap [input];}});결과는 다음과 같습니다.
좋아, 여기서 우리는 "간단한"양식 검증을 처리 할 수 있습니다. 예, 간단합니다. 우리는 계속 더 깊이 가야합니다.
맞춤형 양식 확인!
그런 다음 "Handleic Guy"에 입력 할 수없는 양식 검증을 구현해 봅시다.
지침은 다음과 같습니다.
.Directive ( "DonotinPuthandSomeboy", function ($ compile) {return {reter {gows : "a", "a", 요구 사항 : "ngmodel", 링크 : 함수 ($ scope, $ element, $ attrs, $ ngmodel) {$ ngmodel. $ parsers.push.push (value (value === ") 유효하지 않은, $ 오류는 {hilly : true} $ ngmodel. $ setValidity ( "handsome", false);} return value;}}}})가됩니다.결과는 다음과 같습니다.
여기에는 $ ngmodel. $ parsers와 $ ngmodel. $ setValidity의 두 가지 주요 사항이 있습니다.
$ ngmodel. $ parsers는 배열입니다. 입력 상자에 컨텐츠를 입력 할 때는 $ parsers에서 함수를 가로 지르고 실행합니다.
$ ngmodel. $ setValidity ( "잘 생긴", 거짓); 유효하지 않은 것으로 잘 생겼습니다. $ ngmodel을 설정합니다. $ error [ "handsome"] = true;
$ ngmodel 삭제. $$ success [ "handsome"]도 설정되었으며 자세한 내용은 소스 코드를 검색 할 수 있습니다.
여기서는 프로세스를 요약하겠습니다.
-> 사용자 입력
-> Angular는 모든 기능을 $ parsers로 실행합니다
-> $ SETVALIDICE ( "XXOO", FALSE)를 검사합니다. 그러면 xxoo는 $ ngmodel로 설정됩니다. $ error [ "xxoo"]
-> 그러면 errortip 명령어는 ng-repeat $ ngmodel. $ 오류가됩니다
-> ErrorFilter가 오류 메시지를 피합니다
-> 오류 메시지가 끝에 표시되었습니다
입력 상자의 디스플레이 컨텐츠를 사용자 정의하십시오
여러 번, 개발은 오류를 확인하고 오류를 표시하는 것만 큼 간단하지 않습니다. 때로는 입력 상자의 내용을 포맷해야합니다.
예를 들어 "1000"은 "1,000"으로 표시됩니다.
"안녕하세요"는 "안녕하세요"로 나타납니다.
이제 자동 이니셜을 구현하겠습니다.
소스 코드는 다음과 같습니다.
<form name = "form"novelIdate = "novalidate"> <input name = "text"type = "text"ng-model = "name"상단 --case> </form> .Directive ( "대문자", function () {return {제한 : "a", 요구 사항 : "ngmodel", 링크 : 함수 ($ scope, $ element, $ attrs, $ ngmodel) {$ ngmodel. $ parsers.push (function (value) {var viewValue; if (angular.isundEfined (value)) {viewvalue = "";} ViewValue [0] .toupperCase () + viewValue.subString (1); // 인터페이스 내용을 설정합니다. $ ngmodel.여기서 우리는 $ setViewValue 및 $ render, $ setViewValue를 사용하여 ViewValue를 지정된 값으로 설정하고 $ render는 인터페이스에 ViewValue를 표시합니다.
많은 사람들은 $ setViewValue를 사용하면 인터페이스를 업데이트 할 수 있지만 $ render를 사용하지 않으며 결국 인터페이스가 무엇이든 상관없이 인터페이스가 새로 고침되지 않았습니다.
$ ngmodel 만 있으면 $ parsers가 충분하지 않으면 $ parsers는 사용자가 입력 상자에서 새 컨텐츠를 입력 할 때만 트리거됩니다. 또 다른 상황은 입력 상자의 내용을 새로 고침해야한다는 것입니다.
그것은 양방향 바인딩입니다. 예를 들어, 현재 입력 상자는 MainController의 $ SCOPE.NAME에 바인딩됩니다. 사용자가 다른 방식으로 $ scope.name을 "hello"로 변경하면 입력 상자에서 첫 번째 문자의 대문자를 볼 수 없습니다.
현재 $ formatters를 사용해야하므로 먼저 예를 살펴 보겠습니다.
<body ng-controller = "maincontroller"> <form name = "form"novalidate = "novalidate"> <button ng-click = "random ()"> random </button> <input name = "text"ng-model = "name" "popper-case> </form> </body>
MainController 컨텐츠 :
Angular.Module ( "app", []). 컨트롤러 ( "MainController", function ($ scope, $ timeout) {$ scope.random = function () {$ scope.name = "hello" + math.random ();}})충분히 간단합니다. 버튼을 클릭하면 $ scope.name은 hello로 시작하는 임의의 컨텐츠가됩니다.
Hello의 초기 문자는 우리가 원하는 것이 아니라 자본화되지 않는 것이 분명합니다.
다음 명령의 내용을 수정합니다.
.Directive ( "대문자", function () {return {제한 : "a", "a", 요구 : "ngmodel", 링크 : 링크 : 함수 ($ scope, $ element, $ ngmodel) {$ ngmodel. $ parsers.push (value (value) {var viewvalue = 상위 상한 평면 (value value (value)); // $ ngmodel. $ setViewValue (viewValue); // 인터페이스에 렌더링,이 기능은 매우 중요합니다. $ ngmodel. $ render ();}; 문자열 함수 handleimpyvalue (value) {return angular.isundefined (value) ":" + value;} // preceive capital function aluge.length> 0 [0].요약 :
1.
-> 사용자는 입력 상자에 컨텐츠를 입력합니다
-> $ ngmodel에서 함수의 각도 트래버스. $ parsers는 입력 컨텐츠를 변환 한 다음 $ ngmodel로 설정합니다. $ modelValue
-> $ ngmodel. $ parsers 배열의 함수에서 $ ngmodel. $ viewValue를 수정 한 다음 $ ngmode. $ render ()는 컨텐츠를 렌더링합니다.
2.
-> 이름으로 설정하려면 버튼을 통해 임의 문자열 생성
-> 더러운 감지가 이름의 값이 $ ngmodel과 일치하지 않는지 여부를 결정합니다. $ modelValue (여기서 $ watch를 사용하여 구현). 일관성이없는 경우, 모든 기능을 $ 형식의 모든 기능을 반대 순서로 반대하고 실행하고 최종 반환 값을 $ ngmodel에 할당합니다. $ viewValue
-> 입력 상자 컨텐츠를 새로 고칩니다
"입력 상자의 디스플레이 컨텐츠를 사용자 정의"할 수 있습니까?
왜 최적화합니까?
그 이유는 매우 간단합니다. "사용자 정의 컨텐츠"를 구현하기 위해 $ parsers 및 $ 포맷터가 사용됩니다. 실제로, 둘의 내용은 매우 유사합니다! 이것은 매우 중요합니다.
최적화하는 방법?
$ ngmodel. $ Validators를 사용하십시오.
자, 이제 예제를 변경하십시오.
.Directive ( "대문자", function () {return {retill : "a", "a", "ngmodel", "ngmodel", 링크 : 함수 ($ scope, $ element, $ attrs, $ ngmodel) {// 1.3은 다른 장소를 통해 수동으로 입력하든 업데이트하든 $ ngmodel. 대문자 컨텐츠를 설정하여 인터페이스 내용 $ ngmodel. $ setviewvalue (viewValue); // 인터페이스에 대한 리소스,이 기능은 매우 중요한 $ ngmodel입니다. $ render (); // verification이 전달되지 않음을 나타냅니다. handsemptyValue (value) {return angular.isundefined (value) ":" + value;} // 초기 문자 기능 대문자 firstword (return value.length> 0?이 코드는 훨씬 간단하며 $ ngmodel. $ Validators는 버전 1.3 이상에서만 지원됩니다.
$ ngmodel. $ validators.uppercase 함수의 반환 값이 false 인 경우 $ ngmodel. $ error [ '대문자'] = true. 이것은 $ ngmodel과 유사합니다. $ setValidity ( "대문자", false).