Question

我有一个打开ngDialog.openConfirm的按钮。在该对话框中，我有一个表单，其中包含一个必需的textarea，需要至少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>

我希望只有在表格有效时才能提交对话。

我试图通过在我的控制器中创建一个函数来做到这一点，但是在访问表单/关闭对话框时遇到了麻烦。

有什么想法吗？

更新：我改变了我的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（）。

e.g。

模板：

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

控制器：

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

在关闭之前在ngDialog openConfirm中验证表单

3 个答案: