使用angular验证bootstrap模态窗口按钮单击时的输入字段

I am trying to validate input fields on submit/ok button click in a modal window using angularjs framework. What I have tried are to add the attributes required/ng-required on my input button. But on my ok button click the input text field is not validated and the modal window is dismissed. As below is my modal-body. I would like to see the angular behaviour of showing the red border around it on click of ok.

我正在尝试使用angularjs框架验证提交/确定按钮上的输入字段在模式窗口中单击。我试过的是在输入按钮上添加所需的属性/ ng-required。但是在我的ok按钮上单击输入文本字段未经过验证，模式窗口被取消。以下是我的模态体。我希望看到在点击ok时显示红色边框的角度行为。

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

Is there something additional I need to do in my event handler for submit buttons? Below is a plunker I created for the demo. Any help would be highly appreciated. http://plnkr.co/edit/ACoTQgIVnWnR92LngT89?p=preview By the way the plunker will run only in firefox.

在我的提交按钮的事件处理程序中，我还需要做些什么吗？下面是我为演示创建的一个plunker。任何帮助将受到高度赞赏。 http://plnkr.co/edit/ACoTQgIVnWnR92LngT89?p=preview顺便说一下，plunker只能在firefox中运行。

2 个解决方案

#1

First you'll need to use the correct elements and corresponding classnames. You'll need to wrap your input in a div with classname form-group, and that needs to be wrapped into a form element. The actual input needs to have the form-control class:

首先，您需要使用正确的元素和相应的类名。您需要将输入包装在具有classname form-group的div中，并且需要将其包装到表单元素中。实际输入需要具有表单控件类：

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

A nice read on properly using forms with bootstrap can be found here:

可以在此处找到正确使用带引导程序的表单的精彩读物：

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

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

Now that it's a proper bootstrap form you can add angular validation. That's very simple just by giving the form and the input a name attribute:

现在它是一个正确的引导程序表单，您可以添加角度验证。通过为表单和输入提供name属性，这非常简单：

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

Now angular will preform validation in the background. It will add modalForm to the scope of your modalcontroller from where you can get the state of the form and it's input elements.

现在angular将在后台执行验证。它会将modalForm添加到modalcontroller的范围，从中可以获取表单的状态和输入元素。

Now because of the required attribute the input and form has been deemed invalid which can be checked by using: modalForm.modalInput.$invalid That will return true, when the input is empty . You can use it to add the has-error class to the form-group div element which will turn the border of the input element to red. You can dynamicly add this class by using the ng-class directive:

现在因为必需的属性，输入和表单被认为是无效的，可以通过使用：modalForm.modalInput来检查。$ invalid当输入为空时，它将返回true。您可以使用它将has-error类添加到form-group div元素，该元素将输入元素的边框变为红色。您可以使用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>

You can also add a message which also will be colored through the has-error class. Add a span element with the help-block class and use the ng-show directive to toggle it on the required error:

您还可以添加一条消息，该消息也将通过has-error类进行着色。使用help-block类添加span元素，并使用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>

Now if you want to make it impossible to push the ok button when the form is invalid you can toggle the disabled class and/or add use the ng-disabled directive:

现在，如果您希望在表单无效时无法按下ok按钮，则可以切换禁用的类和/或添加使用ng-disabled指令：

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

I recommend reading the previous link on bootstrap forms and the following guide for using angular's forms. It has good examples:

我建议阅读bootstrap表单上的上一个链接以及使用angular表格的以下指南。它有很好的例子：

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

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

Here's the complete modal code and a working example on Plunker:

这是关于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

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

PS: i know it doesn't answer you question as to how to preform input validation on button click but that's because it's not "the angular way" of using forms. The above and the links i provide should give you a good idea on how to properly use validation within Angular. Hope it helps, good luck.

PS：我知道它没有回答你关于如何在按钮点击上预先形成输入验证的问题，但这是因为它不是使用表单的“角度方式”。以上和我提供的链接应该让您了解如何在Angular中正确使用验证。希望它有所帮助，祝你好运。

#2

Here are the main directions to get what you want:

以下是获得您想要的主要方向：

• Wrap your input in a <form> element.
• 将输入包装在
  元素中。
• In the ok() function, close modal only if it's valid
• 在ok（）函数中，只有在它有效时才关闭模态

I also replaced type="text" with type="number", since you want the user to input a number. Also corrected the plunker to make it work:

我还用type =“number”替换了type =“text”，因为你希望用户输入一个数字。还修正了plunker使它工作：

ModalInstanceController

ModalInstanceController

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

HTML

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>

See plunker

见plunker

---

Improvement: Play with angular validation to add red borders if input is invalid:

改进：如果输入无效，则使用角度验证来添加红色边框：

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

See forked plunker

见分叉的plunker