使用angular验证引导模式窗口按钮点击时的输入字段

Validate input fields on bootstrap modal window button clicks using angular

本文关键字：字段 输入 按钮 窗口 验证 angular 模式 使用      更新时间：2023-09-26

我正在尝试使用angularjs框架在模态窗口中验证提交/ok按钮点击的输入字段。我所尝试的是在我的输入按钮上添加所需/ng-required属性。但是在我的ok按钮上单击输入文本字段没有被验证，模态窗口被驳回。下面是我的情态体。我想看看在点击确定后，在它周围显示红色边框的角度行为。

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

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

首先需要使用正确的元素和相应的类名。您需要将输入包装在类名为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/形式

现在它是一个合适的引导表单，你可以添加角度验证。这很简单，只要给表单和输入一个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>

现在angular将在后台执行验证。它会将modalForm添加到你的modalcontroller的作用域，从那里你可以获得表单的状态和它的输入元素。

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

我建议阅读前面关于引导表单的链接，以及下面使用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 =

预览

PS:我知道它没有回答你的问题，如何执行输入验证按钮点击，但那是因为它不是"角的方式"使用表单。上面的内容和我提供的链接应该会让你对如何在Angular中正确使用验证有一个很好的了解。希望对大家有所帮助，祝大家好运。

以下是获得你想要的东西的主要方向:

  • 将你的input包裹在<form>元素中
  • 在ok()函数中，仅当有效时关闭模式

我还将type="text"替换为type="number"，因为您希望用户输入一个数字。还纠正了柱塞使其工作:

ModalInstanceController 

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


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

看到strong>恰好

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

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

参见叉形活塞

相关文章：