Validation AngularJS <input> sans <form> englobant

Est-il possible dans Angular de valider un seul, isolé <input>de la même manière les formulaires sont validés? Je pense à quelque chose comme ça:

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

L'exemple ci-dessus ne fonctionne pas. Le renfermer dans un <form>et le remplacer ng-showpar des ng-show="myForm.myInput.$error.maxlength"aides.

Est-il possible de faire cela sans utiliser <form>?

angularjs validation

— Wojtek
source

L'as tu essayé? Je ne pense pas que ce soit le cas, je pense qu'Angular crée form.FormControllerdes coulisses qui gardent une trace des états d'entrée d'un formulaire, des choses comme valid\invalid & dirty\pristine. docs.angularjs.org/api/ng/type/form.FormController

— meconroy

Réponses:

184

Vous pouvez utiliser la directive angulaire ng-form ( voir la documentation ici ) pour regrouper n'importe quoi, même en dehors d'un formulaire html. Ensuite, vous pouvez tirer parti de FormController angulaire.

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

Exemple

— Silvio Lucas
source

J'ai accepté cette réponse. C'est ce que je cherchais, même si la réponse est venue un peu trop tard :)

— Wojtek

Cela m'a aidé aussi. Je tirais mes cheveux et je suis tombé dessus. Je vous remercie!

— Alex McCabe

Pour les futurs lecteurs qui souhaitent également valider un tel formulaire sur l'événement ng-click d'un bouton, voir ici: stackoverflow.com/a/24123379/1371408

— Matty J

Exemple d'entrées multiples avec des validations individuelles plnkr.co/edit/wuOExkq4LXEiDELm2C6E?p=preview

— Nathan Redblur

@SilvioLucas - votre exemple "s'exécute toujours" même si le champ est vide ...?

— colmde

En vous basant sur la réponse de Silvio Lucas, si vous effectuez une itération en boucle et que vous avez besoin de pouvoir interpoler les noms de formulaires et les états valides:

<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
source

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

— codeur maniaque
source

Est-ce différent de stackoverflow.com/a/25342654/2333214 ? Si oui, pouvez-vous ajouter une explication en quoi cela diffère?

— TJ

Et l'explication?

— Maximiliano Becerra