檢查ng表格無效的有效性

Question

如何檢查沒有名稱的ng表格的有效性？通常使用一個名稱

<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形式。然後，「child」指令需要「form」和「myForm」（它從父級獲得）。一旦有了它，它將表單控制器綁定到作用域（這是由父級原型繼承的，因此不存在衝突）。我還必須給輸入一個ng模型，以便它自己註冊表單。

的演示中看到的jsfiddle：http://jsfiddle.net/Cv8zH/

我的每一個形式的指令維持$有效和$質樸而無需名稱。

更新： 如果您需要爲每種形式不同的輸入，你可以做同樣的事情，只是transclude輸入：見更新小提琴：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>