如何驗證角度指令中的動態表單域？

我想用指令中創建的字段創建表單。數據的數據綁定正常工作，但驗證不起作用。如何驗證角度指令中的動態表單域？

這是HTML：

<body ng-controller="MainCtrl"> 
    <h1>form</h1> 
    <form name="form"> 
     <div ng-repeat="conf in config"> 
      <div field data="data" conf="conf"></div> 
     </div> 
    </form> 
    <pre>{{data|json}}</pre> 
</body>

控制器和現場指導：

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.data = {name: '', age: ''} 
    $scope.config = [ 
     {field: 'name', required:true}, 
     {field: 'age'} 
    ]; 
}); 

app.directive('field', function ($compile) { 
    return { 
     scope: { 
      data: '=', 
      conf: '=' 
     }, 
     link: function linkFn(scope, element, attrs) { 
      // field container 
      var row = angular.element('<div></div>'); 

      // label 
      row.append(scope.conf.field + ': '); 

      // field input 
      var field = angular.element('<input type="text" />'); 
      field.attr('name', scope.conf.field); 
      field.attr('ng-model', 'data.' + scope.conf.field); 
      if (scope.conf.required) { 
       field.attr('required', 'required'); 
      } 
      row.append(field); 

      // validation 
      if (scope.conf.required) { 
       var required = angular.element('<span>required</span>'); 
       required.attr('ng-show', 
        'form.' + scope.conf.field + '.$error.required'); 
       row.append(required); 
      } 

      $compile(row)(scope); 
      element.append(row); 
     } 
    } 
});

問題是，現場name驗證不起作用和驗證文本required從未顯示。在ng-show可能是form在指令中是未知的。但我不知道如何將表單傳遞給field指令。你能幫我解決嗎？謝謝。

這裏是活代碼：http://plnkr.co/edit/j0xc7iV1Sqid2VK6rMDF?p=preview

來源

2013-05-03 MarekLi

我有同樣的問題作鬥爭。我在角源中發現了一個未公開的特性：'FormController'具有'$ addControl'和'$ removeControl'方法。我正在考慮利用這些方法從指令中動態地將控件添加到父'FormController'中。如果我成功了，會讓你知道。 – 2013-05-27 21:40:11

你需要使用ng-form directive，並直接推動力場到表單對象。

這個線程可以幫助你： https://github.com/angular/angular.js/issues/1404

來源

2013-07-23 14:12:39

TODO：

前：

$compile(row)(scope); 
element.append(row);

後：

element.append(row); 
$compile(row)(scope);

P/S在 '拖板' 爲設施添加CSS：

.ng-invalid { 
    border: 1px solid red; 
}

來源

2013-12-10 12:47:22 Vladimir

儘管非常晦澀，但實際上這是一個答案。應儘快接受 – incarnate 2015-07-12 10:27:02

這裏是你的分叉來解決你的問題一個plunker： http://plnkr.co/edit/qoMOPRoSnyIdMiZnbnDF?p=preview

總之，我添加了一個觀看將切換錯誤消息而不是使用ng-show指令。當您試圖在指令鏈接中動態添加指令時，事情會變得毛骨悚然。對於這樣的簡單用例，添加自己的手錶會更快。

您也可以看看這個指令，它預先配置爲處理許多使用情況進行驗證，以及允許您創建自定義的驗證容易https://github.com/nelsonomuto/angular-ui-form-validation

var toggleRequiredErrorMessage = function (invalid) { 
    if(invalid === true) { 
     addRequiredErrorMessage(); 
    } else { 
     removeRequiredErrorMessage(); 
    } 
}; 
scope.$watch(watchIfRequired, toggleRequiredErrorMessage);

來源

2014-06-23 17:08:53 nelsonomuto

如何驗證角度指令中的動態表單域？

回答

相關問題