Validate form within ngDialog openConfirm before closing

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.

Addressing the answers about ng-disabled: I realised this is an option, however I have a system throughout my application where once you click submit, if the form isn't valid it comes up with an error message. I would prefer if I could keep to this system, rather than disabling the button — DeejC, Nov 17 '17 at 14:06

score 0 · Answer 1 · answered Nov 17 '17 at 13:09

0

Simply you can add ng-disabled option with your form name

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

answered Nov 17 '17 at 13:09

Lakmi

1,379
3
16
27

NTP · Answer 2 · 2017-11-17T14:13:57.887

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>

Thanks for your answer, this is an option I might resort to, however I would prefer that the button was enabled and the error message appears once I click the button (without executing the function of ng-click). — DeejC, Nov 17 '17 at 14:25

score 0 · Accepted Answer · answered Nov 24 '17 at 06:00

0

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().

e.g.

Template:

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

Controller:

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

answered Nov 24 '17 at 06:00

huan feng

7,307
2
32
56

Yes, the general idea of this would work. Sorry I don't remember seeing this answer, I'll accept it now – DeejC Feb 14 '18 at 12:22

Validate form within ngDialog openConfirm before closing

3 Answers3