Question

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

<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

以下是获得所需内容的主要方向：

将input换成<form>元素。
在ok()功能中，只有在有效

时关闭模式

我还将type="text"替换为type="number"，因为您希望用户输入数字。还纠正了plunker使它工作：

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

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

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

参见 forked plunker

Answer 2

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

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

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

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

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

<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类添加到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类进行着色。使用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>

我建议阅读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验证bootstrap模态窗口按钮单击时的输入字段

2 个答案: