AngularJS <Eingabe> -Validierung ohne einschließendes <Formular>

Ist es in Angular möglich, eine einzelne zu validieren, isoliert <input>auf ähnliche Weise, wie die Formulare validiert werden? Ich denke über so etwas nach:

<div class="form-group">
    <input name="myInput" type="text" class="form-control" ng-model="bindTo" ng-maxlength="5">
    <span class="error" ng-show="myInput.$error.maxlength">Too long!</span>
</div>

Das obige Beispiel funktioniert nicht. Das Einschließen in ein <form>und das Ersetzen ng-showdurch ng-show="myForm.myInput.$error.maxlength"Hilfen.

Ist es möglich, dies ohne Verwendung zu tun <form>?

angularjs validation Wojtek
quelle

Hast du es versucht? Ich glaube nicht, dass Angular form.FormControllerhinter den Kulissen ein valid\invalid & dirty\pristine. Bild

meconroy

Antworten:

184

Sie können die Winkelanweisung ng-form ( siehe Dokumente hier ) verwenden, um alles zu gruppieren, auch außerhalb eines HTML-Formulars. Dann können Sie den eckigen FormController nutzen.

<div class="form-group" ng-form name="myForm">
    <input name="myInput" type="text" class="form-control" ng-model="bindTo" ng-maxlength="5">
    <span class="error" ng-show="myForm.myInput.$error.maxlength">Too long!</span>
</div>

Beispiel

Silvio Lucas
quelle

Akzeptierte diese Antwort. Das habe ich gesucht, obwohl die Antwort etwas zu spät kam :)

Wojtek

Das hat mir auch geholfen. Ich zog mir die Haare aus und stolperte darüber. Danke dir!

Alex McCabe

Für zukünftige Leser, die ein solches Formular auch beim ng-click-Ereignis einer Schaltfläche validieren möchten, siehe hier: stackoverflow.com/a/24123379/1371408

Matty J

Beispiel für mehrere Eingaben mit individuellen Validierungen plnkr.co/edit/wuOExkq4LXEiDELm2C6E?p=preview

Nathan Redblur

@SilvioLucas - Ihr Beispiel wird immer noch "ausgeführt", auch wenn das Feld leer ist ...?

Colmde

Aufbauend auf der Antwort von Silvio Lucas, wenn Sie in einer Schleife iterieren und in der Lage sein müssen, Formularnamen und gültige Zustände zu interpolieren:

<div
  name="{{propertyName}}"
  ng-form=""
  class="property-edit-view"
  ng-class="{
    'has-error': {{propertyName}}.editBox.$invalid,
    'has-success':
      {{propertyName}}.editBox.$valid &&
      {{propertyName}}.editBox.$dirty &&
      propertyValue.length !== 0
  }"
  ng-switch="schema.type">
  <input
    name="editBox"
    ng-switch-when="int"
    type="number"
    ng-model="propertyValue"
    ng-pattern="/^[0-9]+$/"
    class="form-control">
  <input
    name="editBox"
    ng-switch-default=""
    type="text"
    ng-model="propertyValue"
    class="form-control">
  <span class="property-type" ng-bind="schema.type"></span>
</div>

Blaskovicz
quelle

-4

<!DOCTYPE html>
<html ng-app="plunker">
<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js">   </script>

</head>

<body ng-controller="MainCtrl">
    <div class="help-block error" ng-show="test.field.$error.required">Required</div>
    <div class="help-block error" ng-show="test.firstName.$error.required">Name Required</div>
    <p>Hello {{name}}!</p>
    <div ng-form="test" id="test">
        <input type="text" name="firstName" ng-model="firstName" required> First name <br/> 
        <input id="field" name="field" required ng-model="field2" type="text"/>
    </div>
</body>
<script>
    var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';
      $scope.field = "name";
      $scope.firstName = "FirstName";
      $scope.execute = function() {
        alert('Executed!');
      }
    });

</script>

verrückter Kodierer
quelle

Unterscheidet sich dies von stackoverflow.com/a/25342654/2333214 ? Wenn ja, können Sie eine Erklärung hinzufügen, wie es sich unterscheidet?

Und die Erklärung?

Maximiliano Becerra