检查没有名称的ng-form的有效性

Question

How can I check the validity of ng-form with no name?

<div ng-form>
  <input required name="xxx" />
  <p>valid: {{$valid}}</p>
  <p>pristine: {{$pristine}}</p>
</div>

normally with a name I would do

<div ng-form="test">
  <input required name="xxx" />
  <p>valid: {{test.$valid}}</p>
  <p>pristine: {{test.$pristine}}</p>
</div>

but I have a directive that spits out multiple of these ng-forms on a page and their names are colliding in the scope. so i would like to not give them a name instead of trying to give them all unique names.

Answer 1

Can you write a directive for your each of your forms? Without seeing more of your code, I wrote two directives - One for the form container itself and one for the inputs inside it:

var mod = angular.module("myApp", []);

mod.directive("myForm", function () {
    return {
        restrict: "A",
        transclude: true,
        template: '<div ng-form ng-transclude></div>',
        replace: true,
        scope: true,
        controller: function () {}
    }
});

mod.directive("myInputs", function () {
    return {
        restrict: "A",
        require: ["^form", "^myForm"],
        template: '<div><input ng-model="name" required name="xxx" /><p>valid: {{form.$valid}}</p><p>pristine: {{form.$pristine}}</p></div>',
        replace: true,
        link: function (scope, element, attrs, ctrls) {
            scope.form = ctrls[0];
        }
    }
});

The HTML looks as follows (reuse directives as many times as needed):

<div ng-app="myApp">
    <div my-form>
        <div my-inputs></div>
    </div>
    <div my-form>
        <div my-inputs></div>
    </div>
    <div my-form>
        <div my-inputs></div>
    </div>
</div>

What I'm doing is using the container form (myForm directive) to create an ng-form with no name. Then the "child" directive requires "form" and "myForm" (which it gets from the parent). Once it has this, it binds the form controller to the scope (which is prototypically inherited by the parent so there are no collisions). I also had to give the input an ng-model so it registered itself with the form.

See jsfiddle for demo: http://jsfiddle.net/Cv8zH/

Each my-form directive maintains $valid and $pristine with no need for name.

Update: If you need to have different inputs for each form, you can do something similar, just transclude the inputs: See updated fiddle: http://jsfiddle.net/Cv8zH/1/

<div ng-app="myApp">
    <div my-form>
        <div my-inputs>
            Name: * <input name="myName" ng-model="name" required><br>
            Phone: * <input name="myPhone" ng-model="phone" required ng-pattern="/\d{3}-\d{4}/">
              <p>valid: {{form.$valid}}</p>
              <p>pristine: {{form.$pristine}}</p>
        </div>
    </div>
    <div my-form>
        <div my-inputs>
            Hobby: <input name="hobby" ng-model="hobby">
              <p>valid: {{form.$valid}}</p>
              <p>pristine: {{form.$pristine}}</p>    
        </div>
    </div>
    <div my-form>
        <div my-inputs>
            Address: * <input name="address" ng-model="address" required>
              <p>valid: {{form.$valid}}</p>
              <p>pristine: {{form.$pristine}}</p>
        </div>
    </div>
</div>