Über die Analyse von AngularJs Forms-js-Tutorial-php.cn

In diesem Artikel werden hauptsächlich relevante Informationen und einfache Beispielcodes zusammengestellt.

Steuerelemente (Eingabe, Auswahl, Textbereich) sind eine Möglichkeit für Benutzer, Daten einzugeben . Ein Formular ist eine Sammlung dieser Steuerelemente, die dazu dient, verwandte Steuerelemente zu gruppieren.

Formulare und Steuerelemente bieten Validierungsdienste, sodass Benutzer bei ungültigen Eingaben aufgefordert werden können. Dies sorgt für ein besseres Benutzererlebnis, da Benutzer sofortiges Feedback erhalten und wissen, wie sie Fehler beheben können. Bedenken Sie, dass die clientseitige Validierung zwar eine wichtige Rolle bei der Bereitstellung einer guten Benutzererfahrung spielt, sie jedoch leicht umgangen werden kann und daher nicht vertrauenswürdig ist. Für eine sichere Anwendung ist weiterhin eine serverseitige Authentifizierung erforderlich.

1. Einfache Form

Die Schlüsselanweisung zum Verständnis der bidirektionalen Datenbindung ist ngModel. ngModel bietet eine bidirektionale Datenbindung von Modell zu Ansicht und von Ansicht zu Modell. Darüber hinaus stellt es auch APIs für andere Direktiven bereit, um deren Verhalten zu verbessern.

<!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}}

Nach dem Login kopieren

2. Verwendung von CSS-Klassen

Um das Formular zu erstellen, kontrollieren Sie und ngModel rich Style können Sie die folgende Klasse hinzufügen:

ng-valid
ng-invalid
ng -pristine (nie eingegeben)
ng-dirty (eingegeben)

Das folgende Beispiel verwendet CSS um die Gültigkeit jedes Formularsteuerelements anzuzeigen. Im Beispiel sind sowohl user.name als auch user.email erforderlich, aber wenn sie geändert (ungültig) werden, wird der Hintergrund rot angezeigt. Dadurch wird sichergestellt, dass der Benutzer nicht durch einen Fehler abgelenkt wird, bis er mit dem Formular interagiert (nach dem Absenden?) und feststellt, dass dessen Gültigkeit nicht erfüllt ist.

<!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}}

Nach dem Login kopieren

3. Bindung an Form und Kontrollstatus

In Angular ist die Form von FormController Eine Instanz. Die Formularinstanz kann mithilfe des Namensattributs nach Belieben dem Bereich ausgesetzt werden (ich verstehe das nicht, es gibt keine Eigenschaft im Bereich, die mit dem Namensattribut des Formulars identisch ist, aber aufgrund des „document.form“) name"-Methode, es kann immer noch abgerufen werden). Ebenso sind Steuerelemente Instanzen von NgModelController. Kontrollinstanzen können auf ähnliche Weise mithilfe des Namensattributs für Formulare verfügbar gemacht werden. Dies zeigt, dass die internen Eigenschaften sowohl des Formulars als auch des Steuerelements (Steuerelements) für die Bindung in der Ansicht mithilfe von Standardbindungsprimitiven geeignet sind.

Dadurch können wir das obige Beispiel um die folgenden Funktionen erweitern:

Der RESET-Button ist erst verfügbar, nachdem sich das Formular geändert hat.
Die Schaltfläche SPEICHERN ist nur verfügbar, wenn sich das Formular ändert und die Eingabe gültig ist.
Passen Sie Fehlermeldungen für user.email und user.agree an.

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="ControlState">
<head>
  <meta charset="UTF-8">
  <title>ControlState</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" name="userName" type="text" required><br/>
    <p ng-show="formName.userName.$dirty&&formName.userName.$invalid">
      <span>请填写名字</span>
    </p>
    Email: <input ng-model="user.email" name="userEmail" type="email" required><br/>
    <p ng-show="formName.userEmail.$dirty && formName.userEmail.$invalid">提示:
      <span ng-show="formName.userEmail.$error.required">请填写Email</span>
      <span ng-show="formName.userEmail.$error.email">这不是一个有效的Email</span>
    </p>
    性别: <input value="男" ng-model="user.gender" type="radio">男
    <input value="女" ng-model="user.gender" type="radio">女
    <br/>
    <input type="checkbox" ng-model="user.agree" name="userAgree" required/>我同意：
    <input type="text" ng-show="user.agree" ng-model="user.agreeSign" required/>
    <br/>
    <p ng-show="!formName.userAgree || !user.agreeSign">请同意并签名~</p>
    <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
    <button ng-click="update(user)" ng-disabled="formName.$invalid || isUnchanged(user)">SAVE</button>
  </form>
  <pre class="brush:php;toolbar:false">form = {{user | json}}

saved = {{saved | json}}

Nach dem Login kopieren

4. Benutzerdefinierte Validierung

Angular ist das öffentlichste HTML-Formular Feldtypen (Eingabe, Text, Zahl, URL, E-Mail, Radio, Kontrollkästchen) stellen Implementierungen bereit, und es gibt auch einige Anweisungen (erforderlich, Muster, inlength, maxlength, min, max) für die Formularvalidierung.

Wir können unser eigenes Validierungs-Plug-in definieren, indem wir eine Direktive definieren, die dem ngModel-Controller eine benutzerdefinierte Validierungsfunktion hinzufügt (ist dies ein verbundener ngModelController?). Um einen Controller zu erhalten, gibt die Direktive Abhängigkeiten an, wie im folgenden Beispiel gezeigt (Require-Attribut im Direktivendefinitionsobjekt).

Modell-zu-Ansicht-Aktualisierung – Immer wenn sich das Modell ändert, werden alle Funktionen im Array ngModelController.$formatters (Datenvalidierung und Formatkonvertierung werden ausgelöst, wenn sich das Modell ändert) zur Ausführung in die Warteschlange gestellt, also in Jede Funktion hier hat die Möglichkeit, den Wert des Modells zu formatieren und NgModelController.$setValidity (http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngModel.NgModelController#$setValidity) zu übergeben, um den Validierungsstatus zu ändern der Kontrolle.

Ansicht zur Modellaktualisierung – Ein ähnlicher Ansatz: Immer wenn der Benutzer mit einem Steuerelement interagiert, wird NgModelController.$setViewValue ausgelöst. Zu diesem Zeitpunkt ist es an der Reihe, alle Methoden in NgModelController$parsers auszuführen (nachdem das Steuerelement den Wert aus dem DOM erhalten hat, führt es alle Methoden in diesem Array aus, überprüft, filtert oder konvertiert den Wert und führt auch eine Überprüfung durch). Array.

Im folgenden Beispiel erstellen wir zwei Direktiven.

Die erste ist eine Ganzzahl, die dafür verantwortlich ist, zu überprüfen, ob die Eingabe eine gültige Ganzzahl ist. Beispielsweise ist 1,23 ein unzulässiger Wert, da er einen Dezimalteil enthält. Beachten Sie, dass wir am Anfang des Arrays einfügen (unshift), anstatt am Ende einzufügen (push). Dies liegt daran, dass wir möchten, dass es zuerst ausgeführt wird und den Wert dieses Steuerelements verwendet (es wird geschätzt, dass dieses Array als verwendet wird). Warteschlange). Wir müssen die Validierungsfunktion ausführen, bevor die Konvertierung erfolgt.

第二个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>

Nach dem Login kopieren

五、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}}

Nach dem Login kopieren

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