2014-12-03 99 views
1

我试图创建一个使用ng重复许多行输入的形式。每行有许多输入,用户输入每行的值加起来到每行特定的值,例如AngularJs验证器与许多动态创建的输入形式

值= 20输入1 = 10,输入2 = 10, 值= 24输入1 = 14,输入2 = 10,

从这里用户只能提交表格,如果每一行都完整和正确。因此,我想使用ng-show =“entireForm。$ valid”来显示提交按钮。

这可能吗?我一直在这个问题上停留了很多天,并且因为我是新的Angular而完全混淆了。至少我创建了视图并设置了无内部逻辑的验证器。由于意见在那里我不能确定,如果这甚至有可能与NG-重复

MM.app.directive(“lineitemvalidator”,函数(){

return { 
    require: 'ngModel', 
    restrict: 'A', 
    link: function(scope, elm, attrs, ctrl) { 
     ctrl.$validators.lineItemValidator = function(modelValue,viewValue) { 

      var totalInputHrs = parseFloat(scope.childForm.bill.$viewValue) + parseFloat(scope.childForm.drawDown.$viewValue) 
      + parseFloat(scope.childForm.carryForward.$viewValue) + parseFloat(scope.childForm.writeOff.$viewValue) + parseFloat(scope.childForm.roundUp.$viewValue); 


      if((totalInputHrs==parseFloat(scope.lineItem.billableTime))){ 

       /*scope.childForm.bill.$valid=true; 
       scope.childForm.drawDown.$valid=true; 
       scope.childForm.carryForward.$valid=true; 
       scope.childForm.writeOff.$valid=true; 
       scope.childForm.roundUp.$valid=true; 

       scope.childForm.drawDown.$setValidity("drawDown", true); 
       scope.childForm.bill.$setValidity("bill", true); 
       scope.childForm.carryForward.$setValidity("carryForward", true); 
       scope.childForm.writeOff.$setValidity("writeOff", true); 
       scope.childForm.roundUp.$setValidity("roundUp", true); 

       scope.childForm.$setValidity("childForm",true,scope.childForm); 
        */ 
       console.log("Form valid should = true"); 
       console.log(scope.childForm); 
       return true; 
       console.log("Form valid = "+scope.childForm.$valid); 
      }else{ 
       /*scope.childForm.bill.$valid=false; 
       scope.childForm.drawDown.$valid=false; 
       scope.childForm.carryForward.$valid=false; 
       scope.childForm.writeOff.$valid=false; 
       scope.childForm.roundUp.$valid=false; 
       scope.childForm.drawDown.$setValidity("drawDown", false); 
       scope.childForm.bill.$setValidity("bill", false); 
       scope.childForm.carryForward.$setValidity("carryForward", false); 
       scope.childForm.writeOff.$setValidity("writeOff", false); 
       scope.childForm.roundUp.$setValidity("roundUp", false); 

       scope.childForm.$setValidity("childForm",true,scope.childForm); 
        */ 
       console.log("Form valid = "+scope.childForm.$valid); 
       return false; 
       console.log("Form valid = "+scope.childForm.$valid); 
      } 
     } 
    } 
}; 

回答

2

您将有量使用ng-form这种情况下,每个表单都会有一些特定于其输入字段输入和验证。如果任何一个子表单验证失败时,父窗体自动被标记为$valid$invalid

的设置会是这个样子:

<form name='entireForm'>\ 
    <ng-form name='formChild' ng-repeat='item in items'> 
     <input name='input1' ng-model='item.field1'/> 
     <input name='input2' ng-model='item.field2'/> 
    </ng-form> 
</form> 

每个ng-form都可以单独验证,并且entireForm表单的整体状态仅在所有子级有效时才有效。

+0

唯一的问题是我试图创建一个表,因此每行都是ng-repeat的成员,例如数据“novalidate>中的 user3240957 2014-12-03 11:41:44

+0

另外我如何访问特定于子窗体的元素。例如输入2是子窗体1,我想访问输入2也检查其值? @Chandermani – user3240957 2014-12-03 11:54:58

+0

是的,你会遇到桌面问题,也许你可以看看基于网格的引导布局。 – Chandermani 2014-12-03 12:03:23