如何檢查轉錄表格在指令中的有效性？

Question

重寫此問題以澄清

如何檢查轉錄表格在指令中的有效性？ 我想檢查myForm.$valid在指令的link function中myForm.$valid 。 我會在我的指令中注入不同類型的表格，或者以不同的形式使用我的指令

困難在於范圍是孤立的，並且沒有以下答案對我有效。

請在這里找到完整的代碼，

https://plnkr.co/edit/K3IrE5KVehWXFM9JEMvE?p=preview

我希望在表單無效時禁用“保存”按鈕。

Answer 1

要回答您的主要問題，您可以像任何其他模型值一樣公開和綁定表單：

 angular.module("main", []) .directive("formDirective", formDirective); function formDirective() { return { restrict: "A", scope: { formModel: "=formModel" }, link: function (scope, element, attrs) { scope.$watch("formModel.$valid", function (newValue, oldValue) { console.log(newValue, oldValue); }); } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="main"> <div form-directive form-model="myForm"> <div> <form name="myForm"> <div> <input type="text" ng-model="name" required="required"> </div> Valid: {{myForm.$valid}} </form> <div> </div> </div> 

但是，從我們的聊天對話中可以清楚地看到，您的整體問題更為復雜。

我在這里添加了一個工作示例： https ： //plnkr.co/edit/lkfdmc0PLRadfYFVhFAm？p = preview

這里要實現的關鍵方面是：

• 你正在用$uibModal.open打開一個模態對話框，它會實例化引用的控制器editCtrl並加載你的模板editCtrl.html 。
• 加載過程包括Angular正在編譯模板。 此模板包含根級別的指令，因此也需要編譯該指令。
• 該指令使用dialog.html並加載模板dialog.html 。 請務必注意，esDlg指令的范圍現在可以在dialog.html的模板中dialog.html ，因此您可以訪問在指令聲明scope定義的所有屬性。
  您已經使用對話框標題和文本來使用它。
• 我們所要做的就是在這里綁定有效性信息，以便我們可以在對話框中使用它。

Answer 2

 angular.module("main", []) .directive("formDirective", formDirective); function formDirective() { return { restrict: "A", scope: { formModel: "=name" }, link: function (scope, element, attrs) { scope.$watch("formModel.$valid", function (newValue, oldValue) { console.log(newValue, oldValue); }); } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="main"> <div my-directive> <div> <form name="myForm" form-directive> <div> <input type="text" ng-model="name" required="required"> </div> Valid: {{myForm.$valid}} </form> <div> </div> </div> 

我建議你使用angular-auto-validate

Answer 3

你正確定義指令嗎？ 查看此plunker ，其中validity的記錄如您所期望的那樣。

function MyDirective() {
  return {
    restrict: 'AE',
    scope: true,
    link: function (scope, element, attrs) {
      scope.$watch('myForm.$valid', function (validity) {
        console.log(validity);
      });
    }
  }
}

Answer 4

我從你的代碼創建了一個plunk，它似乎工作正常。 請記住，只有當表單的有效狀態從有效狀態變為無效狀態或反之時，它才會生成日志。

https://plnkr.co/edit/lW3e4p

  <div ng-app="my-app">
    <div ng-controller="testCtrl">
      <div my-directive>
         <form name="myForm">
           <input type="number" step="0.01" ng-model="rate" required>
         </form>
      </div>
    </div>
  </div>

角度：

angular.module('my-app').directive('myDirective', function() {
  return {
    link: function(scope, element, attr, mCtrl) {
      scope.$watch('myForm.$valid', function(validity) {
        console.log(validity);
      })
    }
  };
});