如何检查转录表格在指令中的有效性?

时间:2016-08-09 13:38:20

标签: javascript angularjs

重写此问题以澄清

如何检查转录表格在指令中的有效性? 我想检查myForm.$valid指令中的link function。我会在我的指令中注入不同类型的表格,或者以不同的形式使用我的指令,你可以说

难度很大,范围是孤立的,没有以下答案对我有用。

请在此处找到完整的代码,

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

我希望在表单无效时禁用“保存”按钮。

4 个答案:

答案 0 :(得分:8)

要回答您的主要问题,您可以像任何其他模型值一样公开和绑定表单:



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>
&#13;
&#13;
&#13;

然而,从我们关于聊天的谈话中可以清楚地看出,你的整体问题更为复杂。

我在这里添加了一个工作示例:https://plnkr.co/edit/lkfdmc0PLRadfYFVhFAm?p=preview

这里要实现的关键方面是:

  • 您正在使用$uibModal.open打开模式对话框,该对话框将实例化引用的控制器editCtrl并加载您的模板editCtrl.html
  • 加载过程包括Angular正在编译模板。该模板在根级别包含一个指令,因此该指令也需要编译。
  • 该指令使用transclusion并加载模板dialog.html。请务必注意,esDlg指令的范围现在可以在dialog.html的模板中使用,因此您可以访问指令声明的scope中定义的所有属性。 您已经使用对话框标题和文字来使用它。
  • 我们需要做的就是在这里绑定有效性信息,以便我们可以在对话框中使用它。

答案 1 :(得分:3)

&#13;
&#13;
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);
      });
    }
  }
}
&#13;
<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>
&#13;
&#13;
&#13;

我建议你使用angular-auto-validate

答案 2 :(得分:2)

您是否正确定义了该指令?查看plunker,其中validity已按预期记录。

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

答案 3 :(得分:2)

我从你的代码创建了一个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:

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