집 > 기사 > 웹 프론트엔드 > AngularJs Forms 분석 정보

AngularJs Forms 분석 정보

不言원래의: 2018-06-25 11:39:132339검색

이 글에서는 주로 AngularJs Forms를 소개하고 관련 정보와 간단한 샘플 코드를 정리했습니다. 필요한 친구들이 참고할 수 있습니다.

컨트롤(입력, 선택, 텍스트 영역)은 사용자가 데이터를 입력하는 방법입니다. 양식은 관련 컨트롤을 그룹화하도록 설계된 이러한 컨트롤의 모음입니다.

　 양식과 컨트롤은 유효성 검사 서비스를 제공하므로 사용자는 잘못된 입력에 대한 메시지를 받을 수 있습니다. 이는 사용자가 즉각적인 피드백을 받고 오류 수정 방법을 알 수 있기 때문에 더 나은 사용자 경험을 제공합니다. 클라이언트 측 유효성 검사는 좋은 사용자 경험을 제공하는 데 중요한 역할을 하지만 쉽게 우회할 수 있으므로 신뢰할 수 없다는 점을 명심하세요. 보안 애플리케이션을 위해서는 서버 측 인증이 여전히 필요합니다.

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;
    }
  </style>
</head>
<body>
<p ng-controller="MyCtrl" class="ng-cloak">
  <form novalidate>
    名字: <input ng-model="user.name" type="text"><br/>
    Email: <input ng-model="user.email" type="email"><br/>
    性别: <input value="男" ng-model="user.gender" type="radio">男
    <input value="女" ng-model="user.gender" type="radio">女
    <br/>
    <button ng-click="reset()">还原上次保存</button>
    <button ng-click="update(user)">保存</button>
  </form>
  <pre class="brush:php;toolbar:false">form = {{user | json}}

saved = {{saved | json}}

2. CSS 클래스 사용하기

양식, 컨트롤, ngModel의 스타일을 풍부하게 만들기 위해 다음 클래스를 추가할 수 있습니다.

ng-valid
ng-invalid
ng-pristine(입력되지 않음)
ng-dirty(입력됨)

다음 예에서는 CSS를 사용하여 각 양식 컨트롤의 유효성을 표시합니다. 예제에서는 user.name과 user.email이 모두 필수이지만 수정(더티)되면 배경이 빨간색으로 나타납니다. 이렇게 하면 사용자가 양식과 상호 작용하고(제출 후?) 유효성이 충족되지 않았음을 발견할 때까지 오류로 인해 주의가 산만해지지 않습니다. Angular에서 폼은 FormController의 인스턴스입니다. 양식 인스턴스는 name 속성을 사용하여 마음대로 범위에 노출될 수 있습니다. (여기서는 이해가 안 갑니다. 범위에는 양식의 name 속성과 동일한 속성이 없지만 "document.form" 때문에 name" 방법을 사용하더라도 여전히 얻을 수 있습니다.) 마찬가지로 컨트롤은 NgModelController의 인스턴스입니다. 마찬가지로 컨트롤 인스턴스는 name 속성을 사용하여 양식에 노출될 수 있습니다. 이는 양식과 컨트롤(컨트롤) 모두의 내부 속성이 표준 바인딩 기본 형식을 사용하여 뷰에서 바인딩할 수 있음을 보여줍니다.

이를 통해 위의 예를 다음 기능으로 확장할 수 있습니다.

RESET 버튼은 양식이 변경된 후에만 사용할 수 있습니다.

SAVE 버튼은 양식이 변경되고 입력이 유효한 경우에만 사용할 수 있습니다.

user.email 및 user.agree에 대한 사용자 정의 오류 메시지.

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="CSSClasses">
<head>
  <meta charset="UTF-8">
  <title>CSSClasses</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
    .css-form input.ng-invalid.ng-dirty {
      background-color: #fa787e;
    }
    .css-form input.ng-valid.ng-dirty {
      background-color: #78fa89;
    }
  </style>
</head>
<body>
<p ng-controller="MyCtrl" class="ng-cloak">
  <form novalidate class="css-form" name="formName">
    名字: <input ng-model="user.name" type="text" required><br/>
    Email: <input ng-model="user.email" type="email" required><br/>
    性别: <input value="男" ng-model="user.gender" type="radio">男
    <input value="女" ng-model="user.gender" type="radio">女
    <br/>
    <button ng-click="reset()">RESET</button>
    <button ng-click="update(user)">SAVE</button>
  </form>
  <pre class="brush:php;toolbar:false">form = {{user | json}}

saved = {{saved | json}}

IV. Custom Validation

Angular는 대부분의 공개 HTML 양식 필드(입력, 텍스트, 숫자, URL, 이메일, 라디오, 확인란) 유형에 대한 구현을 제공합니다. 양식 유효성 검사 지시문(필수, 패턴,, 길이, 최대 길이, 최소, 최대).

　ngModel 컨트롤러에 사용자 정의 유효성 검사 기능을 추가하는 지시문을 정의하여 자체 유효성 검사 플러그인을 정의할 수 있습니다(연결된 ngModelController인가요?). 컨트롤러를 가져오기 위해 지시문은 다음 예에 표시된 대로 종속성을 지정합니다(지시문 정의 객체의 require 특성).

모델-뷰 업데이트 - 모델이 변경될 때마다 ngModelController.$formatters(모델 변경 시 데이터 검증 및 형식 변환이 트리거됨) 배열의 모든 함수가 실행 대기열에 추가되므로 여기 있는 모든 함수는 형식을 지정할 수 있습니다. 모델의 값을 NgModelController.$setValidity (http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngModel.NgModelController#$setValidity)를 통해 컨트롤 수정 확인 상태입니다.

보기에서 모델로 업데이트 - 유사한 접근 방식으로 사용자가 컨트롤과 상호 작용할 때마다 NgModelController.$setViewValue가 트리거됩니다. 이때 NgModelController$parser를 실행할 차례입니다(컨트롤이 DOM에서 값을 얻은 후 이 배열의 모든 메서드를 실행하고 값을 검토, 필터링 또는 변환하고 검증도 수행함). 정렬.

　다음 예에서는 두 개의 지시어를 생성합니다.

첫 번째는 입력이 유효한 정수인지 확인하는 역할을 하는 정수입니다. 예를 들어 1.23은 소수 부분을 포함하므로 잘못된 값입니다. 배열의 꼬리에 삽입(푸시)하는 대신 배열의 머리에 삽입(unshift)한다는 점에 유의하세요. 이는 먼저 실행하고 이 컨트롤의 값을 사용하기를 원하기 때문입니다(이 배열은 다음과 같이 사용되는 것으로 추정됩니다). 큐) 변환이 발생하기 전에 유효성 검사 기능이 실행되어야 합니다.

第二个directive是smart-float。他将”1.2”和”1,2”转换为一个合法的浮点数”1.2”。注意，我们在这不可以使用HTML5的input类型”number”，因为浏览器不允许用户输入我们预期的非法字符，如”1,2”（它只认识”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: none;
    }
    .css-form input.ng-invalid.ng-dirty {
      background-color: #fa787e;
    }
    .css-form input.ng-valid.ng-dirty {
      background-color: #78fa89;
    }
  </style>
</head>
<body>
<p class="ng-cloak">
  <form novalidate class="css-form" name="formName">
    <p>
      大小(整数 0 - 10):<input integer type="number" ng-model="size" name="size" min="0" max="10"/>{{size}}<br/>
      <span ng-show="formName.size.$error.integer">这不是一个有效的整数</span>
      <span ng-show="formName.size.$error.min || formName.size.$error.max">
        数值必须在0到10之间
      </span>
    </p>
    <p>
      长度（浮点数）：
      <input type="text" ng-model="length" name="length" smart-float/>
      {{length}}<br/>
      <span ng-show="formName.length.0error.float">这不是一个有效的浮点数</span>
    </p>
  </form>
</p>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
  var app = angular.module("CustomValidation", []);
  var INTEGER_REGEXP = /^\-?\d*$/;
  app.directive("integer", function () {
    return {
      require:"ngModel",//NgModelController
      link:function(scope,ele,attrs,ctrl) {
        ctrl.$parsers.unshift(function (viewValue) {//$parsers，View到Model的更新
          if(INTEGER_REGEXP.test(viewValue)) {
            //合格放心肉
            ctrl.$setValidity("integer", true);
            return viewValue;
          }else {
            //私宰肉……
            ctrl.$setValidity("integer", false);
            return undefined;
          }
        });
      }
    };
  });
  var FLOAT_REGEXP = /^\-?\d+(?:[.,]\d+)?$/;
  app.directive("smartFloat", function () {
    return {
      require:"ngModel",
      link:function(scope,ele,attrs,ctrl) {
        ctrl.$parsers.unshift(function(viewValue) {
          if(FLOAT_REGEXP.test(viewValue)) {
            ctrl.$setValidity("float", true);
            return parseFloat(viewValue.replace(",", "."));
          }else {
            ctrl.$setValidity("float", false);
            return undefined;
          }
        });
      }
    }
  });
</script>
</body>
</html>

五、Implementing custom form control (using ngModel)

　　angular实现了所有HTML的基础控件（input，select，textarea），能胜任大多数场景。然而，如果我们需要更加灵活，我们可以通过编写一个directive来实现自定义表单控件的目的。

　　为了制定控件和ngModel一起工作，并且实现双向数据绑定，它需要：

实现render方法，是负责在执行完并通过所有NgModelController.$formatters方法后，呈现数据的方法。

调用$setViewValue方法，无论任何时候用户与控件发生交互，model需要进行响应的更新。这通常在DOM事件监听器里实现。
　　可以查看$compileProvider.directive获取更多信息。

　　下面的例子展示如何添加双向数据绑定特性到可以编辑的元素中。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="CustomControl">
<head>
  <meta charset="UTF-8">
  <title>CustomControl</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
    p[contenteditable] {
      cursor: pointer;
      background-color: #D0D0D0;
    }
  </style>
</head>
<body ng-controller="MyCtrl">
<p class="ng-cloak">
  <p contenteditable="true" ng-model="content" title="点击后编辑">My Little Dada</p>
  <pre class="brush:php;toolbar:false">model = {{content}}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

AngularJs Forms 분석 정보

관련 기사