0

I have form on a dialog with some input field and a submit, a cancel buttons. I use ng-message for show input is wrong. But when i click cancel with ng-click="$dismiss()" for disable dialog then ng-message is show and action dismiss() is terminate. Some suggestion for me to resolve case

<form name="accountGroupForm" novalidate>
            <div class="form-group"
                 >

                <input id="group-name" class="form-control" name="groupName" placeholder="{{'Group name' | translate}}"
                       ng-model="accountGroup.name" ng-focus="true"
                       required>

                <div ng-messages="accountGroupForm.groupName.$error" ng-if="accountGroupForm.groupName.$touched">
                    <div ng-message="required" class="help-block"><span translate>Group name is required</span></div>

                </div>
            </div>
            <div class="wrapper row">
                <div class="col-xs-6 text-right p-r-xs">
                    <button type="submit" class="hvr-grow btn btn-success w-sm"
                            ng-disabled="accountGroupForm.$invalid"
                            ng-click="submitAccountGroup()" translate>
                        Ok
                    </button>
                </div>
                <div class="col-xs-6 text-left p-l-xs">
                    <button class="hvr-grow btn btn-grey-blue w-sm" ng-click="$dismiss()" translate>Cancel
                    </button>
                </div>
            </div>
        </form>
RuaTre
  • 111
  • 2
  • 8

1 Answers1

1

you can add an ng-if to the ng-message with its own variable then you can set that variable on the desired action. I usually set it on the form validations for $error and $dirty.

ng-show='myForm.inputBox.$dirty && myForm.inputBox.$error'
Ross Rawlins
  • 603
  • 8
  • 22
  • ng-if only runs on initial DOM-load, so it's probably better to use ng-show instead, since it re-evaluates each digest cycle. If you're going to use ng-if you need to have your expression in a function in your controller, that way the ng-if will also be re-evaluated each digest cycle. – aup Mar 17 '16 at 07:37
  • I changed the code to match what you said about the digest cycle. – Ross Rawlins Mar 17 '16 at 07:41
  • my case is function $dismiss of ng-click in directive button cancel is not exercute. I think the ng-message is block it – RuaTre Mar 17 '16 at 08:32
  • You need to check that the $dismiss function is accessible within the dialog scope. The ng-message has nothing to do with it and cant block it. Your original question was about the message showing when it was not supposed to. I would console log the scope of the dialog and confirm that the you have the access. – Ross Rawlins Mar 17 '16 at 08:51
  • $dismiss run incorrect. i miss step click to input is required and next action is click to button cancel – RuaTre Mar 17 '16 at 09:04