关闭前在 ngDialog openConfirm 中验证表单

Question

我有一个按钮可以打开 ngDialog.openConfirm。在该对话框中，我有一个表单，其中包含一个必需的文本区域，并且至少需要 20 个字符。

这是我的代码的简化版本：

someFunction() {
    let newScope = $scope.$new();
    newScope.vm = vm;
    ngDialog.openConfirm({
        scope: newScope,
        template: 'componentDescription.html'
    })
}

还有我的html：

<form role="form" name="subForm">
   <textarea name="compDesc"
             required="true"
             ng-minlength="20"
             ng-model="vm.compDesc">
   </textarea>
   <button type="button" ng-click="confirm(0)">Submit</button>
   <button type="button" ng-click="closeThisDialog(0)">Cancel</button>
</form>

我希望仅在表单有效时才提交对话框。

我试图通过在我的控制器中创建一个函数来做到这一点，但是无法访问 form/closing 对话框。

有什么想法吗？

更新：我已经像这样更改了 html：

<form role="form" name="subForm" novalidate ng-submit="confirm(0)">
   <textarea name="compDesc"
             required="true"
             ng-minlength="20"
             ng-model="vm.compDesc">
   </textarea>
   <button type="submit">Submit</button>
   <button type="button" ng-click="closeThisDialog(0)">Cancel</button>
</form>

这在第一次点击时有效，它会显示我的错误消息，但在第二次点击时它会提交表单，即使它是无效的。似乎无论何时显示错误消息，提交按钮都会忽略验证。

Answer 1

您只需添加 ng-disabled 带有表单名称的选项

<button type="button" ng-disabled="subForm.$invalid" ng-click="confirm(0)">Submit</button>

Answer 2

如果输入字符串的长度小于 20，您可以禁用提交按钮

<button type="button" ng-disabled="vm.compDesc.length < 20" ng-click="confirm(0)">Submit</button>

您还可以在文本区域下方显示一条错误消息，以便用户了解为什么未启用提交按钮

<form role="form" name="subForm">
   <textarea name="compDesc"
             required="true"
             ng-minlength="20"
             ng-model="vm.compDesc">
   </textarea>
   <p ng-show="vm.compDesc.length < 20" style="color:#cc5965">Description should be at least 20 characters</p> 
   <button type="button" ng-click="confirm(0)">Submit</button>
   <button type="button" ng-click="closeThisDialog(0)">Cancel</button>
</form>

Answer 3

您可以手动决定是否调用$scope.confirm(),

通过验证然后调用 $scope.confirm()。

未通过验证，请勿调用 $scope.confirm()。

例如

模板：

<button type="button" ng-click="ok(0)">Submit</button>

控制器：

$scope.ok = function () {
    if(!validationHasPassed()){
        //errorMsg.push('xxx')
        return false;
    }
    $scope.confirm();
};

关闭前在 ngDialog openConfirm 中验证表单

Validate form within ngDialog openConfirm before closing

javascript

html

angularjs

ng-dialog