javascript - 使用 Angular 验证 Bootstrap 模式窗口按钮单击上的输入字段

Question

我正在尝试使用 angularjs 框架在模态窗口中单击提交/确定按钮时验证输入字段。我尝试过的是在我的输入按钮上添加 required/ng-required 属性。但是在我的确定按钮上单击输入文本字段未验证并且模式窗口被关闭。如下是我的模态主体。我希望看到单击确定时在其周围显示红色边框的 Angular 行为。

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

我需要在事件处理程序中为提交按钮做一些额外的事情吗？下面是我为演示创建的 plunker。任何帮助将不胜感激。 http://plnkr.co/edit/ACoTQgIVnWnR92LngT89?p=preview 顺便说一句，plunker 只能在 firefox 中运行。

Answer 1

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

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

可以在这里找到关于正确使用带有 Bootstrap 的表单的好读物:

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

现在它是一个合适的 Bootstrap 表单，您可以添加 Angular 验证。这非常简单，只需给表单和输入一个名称属性:

<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 添加到您的 modalcontroller 的范围内，您可以从中获取表单的状态及其输入元素。

现在由于 required 属性，输入和表单被视为无效，可以使用以下方法检查: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>

您还可以添加一条消息，该消息也将通过 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>

现在，如果您想让表单无效时无法按下 ok 按钮，您可以切换 disabled 类和/或添加使用 ng-disabled 指令:

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

我建议阅读前面关于 Bootstrap 表单的链接和以下使用 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 中正确使用验证。希望对您有所帮助，祝您好运。