檢查沒有名稱的ng-form的有效性

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形式，並且它們的名稱在范圍內沖突。 所以我不想給他們一個名字，而不是試圖給他們所有唯一的名字。

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表單。 然后，“子”指令需要“窗體”和“ myForm”（從父級獲取）。 一旦有了它，它將窗體控制器綁定到范圍（原型通常由父級繼承，因此不會發生沖突）。 我還必須給輸入一個ng模型，以便它使用表單注冊自己。

參見jsfiddle進行演示： 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>