Validación de AngularJS <input> sin <form> adjunto

¿Es posible en Angular validar un solo, aislado <input>de manera similar se validan los formularios? Estoy pensando en algo como esto:

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

El ejemplo anterior no funciona. Incluyéndolo en un <form>y reemplazándolo ng-showcon ng-show="myForm.myInput.$error.maxlength"ayudas.

¿Es posible hacer esto sin usar <form>?

angularjs validation Wojtek
fuente

¿Lo has probado? Sin embargo, no creo que lo sea, creo que Angular crea un form.FormControllerdetrás de escena que realiza un seguimiento de los estados de entrada de un formulario, cosas como valid\invalid & dirty\pristine. docs.angularjs.org/api/ng/type/form.FormController

meconroy

Respuestas:

184

Puede usar la directiva angular ng-form ( consulte los documentos aquí ) para agrupar cualquier cosa, incluso fuera de un formulario html. Entonces, puede aprovechar el FormController angular.

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

Ejemplo

Silvio Lucas
fuente

Aceptó esta respuesta. Eso es lo que estaba buscando, aunque la respuesta llegó un poco tarde :)

Wojtek

Esto también me ayudó. Me estaba tirando del pelo y tropecé con esto. ¡Gracias!

Alex McCabe

Para futuros lectores que también deseen validar dicho formulario en el evento ng-click de un botón, consulte aquí: stackoverflow.com/a/24123379/1371408

Matty J

Múltiples entradas con ejemplo de validaciones individuales plnkr.co/edit/wuOExkq4LXEiDELm2C6E?p=preview

Nathan Redblur

@SilvioLucas - ¿Su ejemplo todavía "Ejecuta" incluso si el campo está vacío ...?

colmde

Sobre la base de la respuesta de Silvio Lucas, si está iterando en un bucle y necesita poder interpolar nombres de formularios y estados válidos:

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

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

codificador maniaco
fuente

¿Es esto diferente de stackoverflow.com/a/25342654/2333214 ? Si es así, ¿podría agregar una explicación en qué se diferencia?

¿Y la explicación?

Maximiliano Becerra