Question

如何检查没有名字的ng-form的有效性？

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

通常我会做一个名字

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

但我有一个指令在页面上吐出多个这些ng-forms，并且它们的名称在范围内发生冲突。所以我不想给他们一个名字，而不是试图给他们所有独特的名字。

Answer 1

你能为你的每个表格写一个指令吗？在没有看到更多代码的情况下，我写了两个指令 - 一个用于表单容器本身，另一个用于其中的输入：

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];
        }
    }
});

HTML如下所示（根据需要多次重复使用指令）：

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

我正在做的是使用容器表单（myForm指令）来创建没有名称的ng表单。那儿＆＃34;孩子＆＃34;指令要求＆＃34;形式＆＃34;和＃34; myForm＆＃34; （它来自父母）。一旦它具有这个，它将表单控制器绑定到范围（由父级原型继承，因此没有冲突）。我还必须给输入一个ng-model，所以它用表单注册了自己。

请参阅jsfiddle for demo：http://jsfiddle.net/Cv8zH/

每个my-form指令都维护$ valid和$ pristine而不需要名称。

<强>更新如果您需要为每个表单添加不同的输入，您可以执行类似的操作，只需转换输入：请参阅更新的小提琴：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>

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

1 个答案: