current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 60 down vote favorite
15

Is it possible in Angular to validate a single, isolated <input> in a similar way the forms are validated? I'm thinking about something like this:

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

The example above doesn't work. Enclosing it in a <form> and replacing ng-show with ng-show="myForm.myInput.$error.maxlength" helps.

Is it possible to do this without using <form>?

share|improve this question
2  
Have you tried it? I don't think it is though, I believe Angular creates a form.FormController behind the scenes that keeps track of the input states of a form, things like valid\invalid & dirty\pristine. docs.angularjs.org/api/ng/type/form.FormController – m.e.conroy Feb 28 '14 at 15:09
up vote 112 down vote accepted

You may use the ng-form angular directive (see docs here) to group anything, even outside a html form. Then, you can take advantage from angular FormController.

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

Example

share|improve this answer
    
Follow an example in plunker: plnkr.co/edit/QJ7Qps?p=preview – Silvio Lucas Aug 18 '14 at 23:23
    
Accepted this answer. That's what I've been looking for, although the answer came a bit too late :) – Wojtek Dec 10 '14 at 11:24
    
This helped me out too. I was pulling my hair out and stumbled over this. Thank you! – Alex McCabe Jan 23 '15 at 11:17
1  
For future readers who also want to validate such a form on the ng-click event of a button, see here: stackoverflow.com/a/24123379/1371408 – Matty J Mar 31 '15 at 5:49
up vote 3 down vote

No, the FormController handles the state of the form ($pristine, $dirty, $valid, $invalid). Properties that check the state of each field are created from the name attribute of each form element.

AFAIK, the only way to achieve validation on an orphan input element is to write custom code.

share|improve this answer
up vote 0 down vote

Building on Silvio Lucas' answer, if you are iterating in a loop and need to be able to interpolate form names and valid states:

<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>
share|improve this answer
up vote -1 down vote 
<!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>

share|improve this answer
    
Is this any different from stackoverflow.com/a/25342654/2333214? If so, could you add an explanation how it differs? – T J Apr 9 at 17:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.