javascript - AngularJS - 在父 View 中单击 'save' 按钮时验证指令中的表单

Question

所以我有一个由多个指令组成的 View 。每个指令在其模板中都有一个表单。

<div>
  <form name="blah">
    <input name="name1" ng-model="abc">
    <directive-a something-a="a"></directive-a>
    <directive-b something-b="b"></directive-b>
  </form>
</div>
<button ng-click="save( blah )">Save</button>

1. 单击“保存”按钮时如何验证“指令-a”和“指令-b”中的表单？
2. 用户可以从“directive-b”中导航到另一个 View 。在这种情况下，如果表单“blah”是脏的，则必须通知用户在导航离开之前保存他的更改。如何检查“directive-b”中“blah”的形式有效性？

非常感谢任何见解。谢谢!

Answer 1

1。单击“保存”按钮时如何验证“指令-a”和“指令-b”中的表单？

您可以从 $scope.form 之类的 Controller 访问此表单。如果任何子项无效，在这种情况下指令-a 或指令-b $scope.form.$valid 将为 false。所以例如在保存功能中你可以有这样的东西

$scope.save = function() {
    if( !$scope.form.$valid ) {
        applyError();
        return;
    }
    ...   
}

保存将被取消并应用错误(当然你必须自己实现这个错误应用功能......)

2。用户可以从“指令-b”内导航到另一个 View 。在这种情况下，如果表单“blah”是脏的，则必须通知用户在导航离开之前保存他的更改。如何检查“directive-b”中“blah”的形式有效性？

在这里，您可以像这样检查表单是否脏 $scope.form.$dirty 如果它脏了，就停止重定向用户并显示警报或其他东西。

希望对您有所帮助...:)