Как я могу проверить действительность вложенной формы в директиве?

Переписывая этот вопрос для разъяснения

Как я могу проверить действительность вложенной формы в директиве? Я хотел бы проверить myForm.$valid в link function директивы. Я буду вводить различные формы в свою директиву или использовать свою директиву в разных формах, которые вы можете сказать

Сложность заключается в том, что область выделена, и для меня не работал следующий ответ.

Здесь можно найти полный код

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

Я хочу отключить кнопку "Сохранить", когда форма недействительна.

Ответы

Ответ 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>

Ответ 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>

Ответ 3

Правильно ли вы определяете директиву? Посмотрите plunker, где validity регистрируется так, как вы ожидали.

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

Ответ 4

Я создал плунжер из вашего кода и, похоже, работает нормально. Просто помните, что он будет генерировать журнал только тогда, когда состояние действительности вашей формы изменится с действительного на недействительный или наоборот.

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);
      })
    }
  };
});