Confirm input fields when clicking modal window button with angular

Question

I am trying to check input fields on a submit / ok button by clicking a button in a modal window using the angularjs frame. I tried to add the necessary / ng attributes to my enter button. But on my ok button, click the text input field is not checked, and the modal window will be fired. As below is my modal body. I would like to see the angular behavior of displaying a red border around it when I click OK.

<div class="modal-body"> 
      <input type="text" class="input-box" size="10" required ng-model="data.myNumber"/>
</div>

Is there anything else I need to do in my event handler for submit buttons? Below is the plunker I created for demonstration. Any help would be greatly appreciated.   http://plnkr.co/edit/ACoTQgIVnWnR92LngT89?p=preview By the way, the plunker will work only in firefox.

Answer 1

First you will need to use the correct elements and the corresponding class names. You will need to put your input in divwith the class name form-group, and you need to wrap it in an element form. The actual inputmust have a class form-control:

<form>
  <div class="form-group">
    <input type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
  </div>
</form>

A good read on the proper use of forms using bootstrap can be found here:

http://getbootstrap.com/css/#forms

Now that it is the correct bootstrap form, you can add an angular check. It is very simple by simply specifying the form and entering the name attribute:

<form name="modalForm">
  <div class="form-group">
    <input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
  </div>
</form>

angular . modalForm , .

- required , , : modalForm.modalInput.$invalid true, . has-error div form-group, . ng-class:

  <div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
    <input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
  </div>
</form>

, has-error. span help-block ng-show :

  <div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
    <input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
    <span ng-show="modalForm.modalInput.$error.required" class="help-block">Input is required.</span>
  </div>
</form>

, ok, , disabled / ng-disabled:

<button class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-class="{ 'disabled': modalForm.$invalid }" ng-click="ok()">OK</button>

angular. :

https://docs.angularjs.org/guide/forms

Plunker:

<div class="modal-content">
  <div class="modal-header">
      <h3 class="modal-title">My Modal</h3>
  </div>
  <form name="modalForm">
    <div class="modal-body">
      <div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
        <input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
        <span ng-show="modalForm.modalInput.$error.required" class="help-block">Input is required.</span>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-class="{ 'disabled': modalForm.$invalid }" ng-click="ok()">OK</button>
      <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
    </div>
  </form>
</div>

http://plnkr.co/edit/GUE3sGci478obwOrzhNw?p=preview

PS: , , , , angular . , , , Angular. , , .

Answer 2

, , :

• input <form>.
• ok() , ,

type="text" type="number", , . , :

ModalInstanceController

app.controller('ModalInstanceCtrl', function($scope, $modalInstance){
  $scope.ok = function () {
    if ($scope.numberForm.$valid) {
      $modalInstance.close();
    }
  };
  // ...
}

HTML

<form name="numberForm">
    <div class="form-group">
        <input type="number" class="form-control input-box" required ng-model="data.myNumber"/>
    </div>
    <button class="btn btn-primary" ng-click="ok()" >OK</button>
    <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</form>

. plunker

---

: angular , :

<form name="numberForm">
    <div class="form-group" ng-class="{ 'has-error' : numberForm.myNum.$invalid }">
        <input type="number" name="myNum" class="form-control input-box" required ng-model="data.myNumber"/>
    </div>
    <button class="btn btn-primary" ng-click="ok()" ng-disabled="numberForm.$invalid">OK</button>
    <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</form>

.