添加了指令的表單的驗證

我想訪問AngularJS爲表單提供的驗證變量的內容。我需要使用類似於代碼中的指令來添加表單，但是如果我這樣做，則無法再訪問$ dirty，$ error，$ invalid變量，我需要訪問它們。添加了指令的表單的驗證

JS：

myApp.directive('test', function() { 
    return { 
    scope : { 
     nameform: "=", 
     nameinput: "=", 
     type: "=" 
    }, 
    template: '<form name=nameform></form>', 
    restrict: 'E', 
    compile: function (elem,attr){ 
     var form = elem.find("form"); 
     if(attr.type == "text") 
     form.html('<input type="text" name="nameinput" ng-model="data.text" placeholder="type here..." required />'); 

    } 
    }; 
});

HTML：

<test nameform="valform" nameinput="valinput" type="text"/> 
{{valform.valinput.$invalid}}

來源

2014-02-06 pirata000

我認爲你不能。因爲您正在使用隔離範圍來構建您的指令，所以您無法訪問信息。您可以嘗試使用共享範圍構建您的指令，我認爲您可以訪問這些信息。

來源

2014-02-06 15:41:07 jvrdelafuente

以哪種方式？你有什麼建議嗎？ – pirata000

你能顯示生成你的指令的html嗎？ – jvrdelafuente

更改您的指令爲ng-form而不是form（因爲ng-form是可嵌套的）。然後將你的指令包裝在另一個表單元素中，並給這個新的表單元素一個名稱。外部表單元素將綁定到您的外部作用域，您可以通過這種方式訪問屬性。

指令模板：

"<ng-form name="valform"></ng-form>"

HTML：

<body ng-view> 
    <div>Valid: {{outerform.$valid}}</div> 
    <div>Errors: {{outerform.$error}}</div> 
    <form id="outerform" name="outerform"> 
    <test type="text"/> 
    </form> 
    </body>

側面說明，表格名稱不玩好動態的名字。下面的plunkr使用靜態名稱，所以我可以幫助你解決當前的問題。我發現了一個不同的SO後解決了動態域名的問題......我想這一個... Dynamic validation and name in a form with AngularJS

這裏是你的工作形式的plnkr ... http://plnkr.co/edit/RFrRXp2kWkP1Mefwl3Kn?p=preview

來源

2014-02-06 15:59:34

謝謝，但我還需要將表格放在表格的單元格中，並且表格是用ng-repeat製成的。如果我將測試元素放置在中，則不再有效。 – pirata000

我需要在控制器中看到$ scope元素，例如 $ scope.mainform.innerform1。$ dirty，$ scope.mainform.innerform2。$ dirty等...... 現在我現在面臨的大問題是給每個表格都有不同的名稱 – pirata000

我不得不用表單和ng-repeat來解決同樣的問題，每個內部表單都有不同的名稱。這就是我製作另一個叫做「dynamicName」的指令，它允許我爲ng-repeat的每次迭代分配不同的名稱給內部表單。我的每個項目都有一個與之關聯的UUID，所以我使用每個項目的UUID作爲每個內部表單的名稱......以及使用UUID作爲每個輸入字段的名稱。所以，我最終得到了每個輸入字段都有自己的ng形式，然後是整個事物的父表單。 –

當你建立你的HTML爲你的輸入控件，請確保你正確地追加了name屬性，它是基於作爲屬性傳入的'nameinput'：

myApp.directive('test', function() { 
    return { 
     scope : { 
     nameform: "=", 
     nameinput: "=", 
     type: "=" 
     }, 
     template: '<form name=nameform></form>', 
     restrict: 'E', 
     compile: function (elem,attr){ 
      var form = elem.find("form"); 
      if(attr.type == "text") 
       form.html('<input type="text" name="' + attr.nameinput +'" ng-model="data.text" placeholder="type here..." required />'); 

     } 
    }; 
});

來源

2014-06-08 13:45:24 pixelbits

添加了指令的表單的驗證

回答

相關問題