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

Question

I have a button that opens an ngDialog.openConfirm . Within that dialog I have a form, which includes a textarea which is required and needs to be a minimum 20 characters.

Here is a simplified version of my code:

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

And my 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>

I would like for the Dialog to only be submitted if the form is valid.

I tried to do this by creating a function in my controller , but that has trouble accessing the form/closing the dialog.

Any ideas?

UPDATE: I've changed my html like so:

<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>

This works on the first click, which brings up my error messages, but on the second click it submits the form even though it's invalid. Seems that whenever the error messages are displayed the submit button ignores the validation.

Answer 1

只需您可以使用表单名称添加ng-disabled选项

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

Answer 2

you can disable submit button if length of input string is less then 20

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

you can also display an error message below text area so users can understand why submit button is not enabled

<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

You can manually decide whether to call $scope.confirm() or not,

Pass validation then call $scope.confirm().

Not Pass validation, don't call $scope.confirm().

eg

Template:

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

Controller:

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