컨트롤 (입력, Select, TextArea)은 사용자가 데이터를 입력하는 방법입니다. 양식은 관련 제어를 그룹화하기 위해 이러한 컨트롤의 모음입니다.
양식 및 컨트롤은 검증 서비스를 제공하므로 사용자는 유효하지 않은 입력에 대한 프롬프트를받을 수 있습니다. 이는 사용자가 즉시 피드백을 받고 오류를 수정하는 방법을 알 수 있으므로 더 나은 사용자 경험을 제공합니다. 클라이언트 검증은 좋은 사용자 경험을 제공하는 데 중요한 역할을하지만 간단히 우회 할 수 있으므로 클라이언트 검증은 신뢰할 수 없습니다. 보안 응용 프로그램에는 서버 측 확인이 여전히 필요합니다.
1. 간단한 형태
양방향 데이터 바인딩을 이해하기위한 주요 지침은 ngmodel입니다. NGModel은 모델에서 뷰로마다 모델에서 볼 때 양방향 데이터 바인딩을 제공합니다. 또한 행동을 향상시키기 위해 다른 지침에 API를 제공합니다.
<! doctype html> <html lang = "Zh-Cn"ng-app = "simpleform"> <head> <meta charset = "utf-8"> <title> propertyevaluation </title> <style type = "text/css"> .ng-cloak {display : none; }. type = "radio"> male <input value = "female"ng-model = "user.gender"type = "radio"> female <br/> <button ng-click = "Reset ()"> 마지막 저장된 복원 </button> <button ng-click = "update (user)"> 저장 </button> </form> <pre> form = {user | json}} </pre> <fre> 저장 = {{저장 | json}} </pre> </div> <script src = "../ Angular-1.0.1.js"type = "text/javaScript"> </script> <script> <script> <text/javaScript "> var app = Angular.Module ("SimpleForm ", []); app.controller ( "myctrl", function ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.copy (user);}; $ scope.reset = function () {$ scope.user = angular.copy ($ scope.copy); $ SCOPE.RESET (); // 불법 값은 사용자를 입력하지 않습니다};2. CSS 클래스 사용
스타일이 풍부한 형태, 컨트롤 및 Ngmodel을 만들기 위해 다음 클래스를 추가 할 수 있습니다.
다음 예에서는 CSS를 사용하여 각 양식 제어의 유효성을 표시하십시오. 이 예에서는 user.name 및 user.email이 필요하지만 수정되면 (더러운) 배경이 빨간색으로 나타납니다. 이렇게하면 양식과 상호 작용 한 후 (제출 후?)의 유효성이 충족되지 않는 것을 발견 할 때까지 사용자가 실수로 산만 해지지 않도록합니다.
<! docType html> <html lang = "zh-cn"ng-app = "cssclasses"> <head> <meta charset = "utf-8"> <title> cssclasses </title> <style type = "text/css"> .ng-cloak {display : 없음; } .css-form input.ng-invalid.ng-dirty {background-color : #fa787e; } .css-form input.ng-valid.ng-dirty {배경색 : #78fa89; } </style> </head> <hod> <div ng-controller = "myctrl"> <form novalidate name = "formname"> name : <input ng-model = "user.name"type = "text"필수> <br/> email : <input ng-model = "user.email" "emale" "value"<br/> gender. ng-model = "user.gender"type = "radio"> male <input value = "female"ng-model = "user.gender"type = "radio"> female <br/> <button ng-click = "reset ()"> reset </button> <button </button </button> <pre> 양식 = {us user | json}} </pre> <fre> 저장 = {{저장 | json}} </pre> </div> <script src = "../ angular-1.0.1.js"type = "text/javaScript"> </script> <script> <text/javaScript "> var app = angular.Module ("cssclasses ", []); app.controller ( "myctrl", function ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.copy (user);}; $ scope.reset = function () {$ scope.user = angular.copy ($ scope.copy); $ SCOPE.RESET (); // 불법 값은 사용자를 입력하지 않습니다};3. 형태 및 제어 상태에 결합
각도에서 양식은 FormController의 인스턴스입니다. 형식 인스턴스는 이름 속성을 사용하여 의지의 범위에 노출 될 수 있습니다 (여기서는 이해가 안 돼요. 항상 양식 이름 속성과 함께 있었던 범위에는 속성이 없지만“문서 이름”과 같은 메소드가 있기 때문에 여전히 얻을 수 있습니다). 마찬가지로, 컨트롤은 NGModelController의 인스턴스입니다. 제어 인스턴스는 이름 속성을 사용하여 유사하게 형성하도록 노출 될 수 있습니다. 이는 형태와 제어의 내부 특성이 표준 결합 프리미티브를 사용한 시야에서 결합하기에 가능하다는 것을 보여준다.
이를 통해 다음 기능을 통해 위의 예를 확장 할 수 있습니다.
<! docType html> <html lang = "Zh-Cn"ng-app = "ControlState"> <head> <meta charset = "utf-8"> <title> 컨트롤 스테이트 </title> <style type = "text/css"> .ng-cloak {display : 없음; } .css-form input.ng-invalid.ng-dirty {background-color : #fa787e; } .css-form input.ng-valid.ng-dirty {배경색 : #78fa89; . 이름을 채우십시오 </span> </div> 이메일 : <input ng-model = "user.email"name = "userEmail"type = "email"필수> <br/> <div ng-show = "formname.useremail. $ dirty && formname.useremail. 이메일 </span> <span ng-show = "formname.useremail. $ error.email"> 이것은 유효한 이메일이 아닙니다 </span> </div> 성별 : <input value = "male"ng-model = "user.gender"type = "radio"> male <input value = "female"ng-model = "user. ng-model = "user.agree"name = "userAgree"필수/> 나는 동의합니다 : <input type = "text"ng-show = "user.agree"ng-model = "user.agreesign"requeSign "requeSign"requeSign "reving/<div ng-show ="! formname.useragree ||! user.agreesign "> 동의 ~ </div> </div> ng-disabled = "isunchanged (user)"> reset </button </button> <button ng-click = "update (user)"ng-disabled = "formname. $ invalid || isunchanged (user)"> 저장 </button> </form> <fre> form = {{user | json}} </pre> <fre> 저장 = {{저장 | json}} </pre> </div> <script src = "../ Angular-1.0.1.js"type = "text/javaScript"> </script> <script> <script type = "text/javaScript"> var app = Angular.Module ( "ControlState", []); app.controller ( "myctrl", function ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.copy (user);}; $ scope.reset = function () {$ scope.user = angular.copy ($ scope.copy); $ scope.isunchanged = function (user) {user, $ scope.saved);4. 사용자 정의 검증
Angular는 대부분의 공개 HTML 양식 필드 (입력, 텍스트, 번호, URL, 이메일, 라디오, 체크 박스) 유형에 대한 구현을 제공하며 양식 검증을위한 지시문 (필수, 패턴, 내장, Maxlength, Min, Max)도 있습니다.
NGModel 컨트롤러에서 지시문을 정의하여 자체 인증 플러그인을 정의 할 수 있습니다 (NGModelController가 함께 연결되어 있습니까?). 컨트롤러를 얻으려면 Directive는 다음 예제에서와 같이 종속성을 지정합니다 (Directive는 객체의 요구 사항을 정의합니다).
업데이트를 볼 때마다 모델이 변경 될 때마다 NGModelController의 모든 기능. $ Formatters (모델 변경시 데이터 검증 및 서식 변환) 배열 배열 배열은 실행을 위해 대기열되므로 여기서 각 기능은 NGModelController를 통해 모델의 값을 형식화하고 컨트롤의 확인 상태를 수정할 수 있습니다. (http://code.angularjs.org/1.0.2/docs/api/ng.direction:ngmodel.ngmodelcontroller#$ setvalidity).
모델 업데이트보기 - 사용자가 컨트롤과 상호 작용할 때마다 NGModelController. $ setViewValue가 트리거됩니다. 이제 ngmodelcontroller $ parsers를 실행할 차례입니다 (컨트롤이 DOM으로부터 값을 얻을 때이 배열의 모든 메소드가 실행되고 값이 검토, 필터링 또는 변환되며 검증됩니다).
다음 예에서는 두 가지 지침을 만들 것입니다.
첫 번째는 정수이며 입력이 유효한 정수인지 확인하는 일입니다. 예를 들어, 1.23은 분수 부품을 포함하기 때문에 불법 가치입니다. 어리석은 시프트를 사용하여 테일을 배열 헤드에 삽입하여 푸시하는 것을 교체하고 먼저 실행 하고이 컨트롤의 값을 사용하기를 원하기 때문에 (배열이 큐로 사용 된 것으로 추정 됨) 변환이 발생하기 전에 검증 기능을 실행해야합니다.
두 번째 지침은 스마트 플로트입니다. 그는 "1.2"및 "1,2"를 합법적 인 부동물 지점 번호 "1.2"로 전환합니다. 브라우저는 사용자가 "1,2"와 같은 불법 문자를 입력 할 수 없기 때문에 여기서는 HTML5 입력 유형 "숫자"를 사용할 수 없습니다 ( "1.2"만 인식).
<! docType html> <html lang = "zh-cn"ng-app = "customvalidation"> <head> <meta charset = "utf-8"> <title> customvalidation </title> <style type = "text/css"> .ng-cloak {display : 없음; } .css-form input.ng-invalid.ng-dirty {background-color : #fa787e; } .css-form input.ng-valid.ng-dirty {배경색 : #78fa89; . 유효한 정수가 아닌 </span> <span ng-show = "formname.size. ng-show = "formname.length.0error.float"> 이것은 유효한 부동산 지점 번호가 아닙니다. []); var integer_regexp =/^/-?/d*$/; app.directive ( "Integer", function () {return {요구 사항 : "ngmodel", // ngmodelcontroller 링크 : 함수 (스코프, 엘레, attrs, ctrl) {ctrl. $ parsers.unshift (viewvalue) {// $ parsers, view to vookes (integer_regexp.t)) // ctrl. var float_regexp = /^/-?/d+(?:,,/d+) ?$/; app.directive ( "smartfloat", function () {return {return : "ngmodel", 링크 : function (scope, ele, attrs, ctrl) {ctrl. $ parsers.unshift (function (viewvalue)) {if (float_regexp.test (viewvalue)) {ctrl. $ setvalidity ( ", true"); parsefloat (viewvalue.replace ( ",". ");5. 사용자 정의 양식 컨트롤 구현 (ngmodel 사용)
Angular는 모든 HTML (입력, Select, TextArea)의 기본 제어를 구현하며 대부분의 시나리오에 유능합니다. 그러나보다 유연 해야하는 경우 지침을 작성하여 양식 제어를 사용자 정의하는 목적을 달성 할 수 있습니다.
컨트롤 및 NGModel을 개발하여 함께 작동하고 양방향 데이터 바인딩을 구현하려면 다음을 필요로합니다.
렌더 메소드 구현은 모든 ngmodelController를 실행하고 전달한 후 데이터를 렌더링하는 데 도움이되는 메소드입니다. $ Formatters 메소드.
$ setViewValue 메소드를 호출하면 사용자가 컨트롤과 상호 작용할 때 상관없이 모델을 응답으로 업데이트해야합니다. 이것은 일반적으로 DOM 이벤트 리스너에서 구현됩니다.
자세한 내용은 $ compileprovider.dipiberation을 볼 수 있습니다.
다음 예제는 편집 할 수있는 요소에 양방향 데이터 바인딩 기능을 추가하는 방법을 보여줍니다.
<! doctype html> <html lang = "zh-cn"ng-app = "customcontrol"> <head> <meta charset = "utf-8"> <title> customcontrol </title> <style type = "text/css"> .ng-cloak {디스플레이 : 없음; } div [contenteditable] {커서 : 포인터; 배경색 : #d0d0d0; } </style> </head> <body ng-controller = "myctrl"> <div> <div contenteditable = "true"ng-model = "content"> my little dada </div> <fre> model = {{content}} </pre> <button ng-click = "reset 모델 tirgger 모델 to vitien to ($ render). src = "../ Angular-1.0.1.js"type = "text/javaScript> <script> <script type ="text/javaScript "> var app = angular.module ("CustomControl ", []); app.controller ( "myctrl", function ($ scope) {$ scope.reset = function () {$ scope.content = "my little dada"; // 여기에 ngmodelController를 얻는 방법? 조언을 줄 수 있기를 바랍니다! 감사합니다}); app.directive ( "contenteditable", function () {return {요구 사항 : "ngmodel", 링크 : function (scope, ele, attrs, ctrl) {// view-> model ele.bind ( "blur keyup", function () {scope. $ apply (function () {console.log ( "setViewvalue"); ctrl. }); </script> </body> </html>