当前位置: 首页 > 知识库问答 >
问题:

AngularJS表单验证-至少一个具有增值类的输入

常光明
2023-03-14

我有一个表单,其中至少一个输入必须包含数据,因此我使用以下命令禁用提交,直到至少一个输入包含数据:

<form novalidate>
  <input type="text" ng-model="caption.topCap" id="topCap" class="pull-left" required>
  <input type="text" ng-model="caption.bottomCap" id="bottomCap">
  <input type="submit" value="Caption It" class="btn btn-block btn-success btn-lg" ng-disabled="!(caption.topCap || caption.bottomCap)">
</form>

这是控制器:

capApp.controller('captionFormController', ['$scope', function($scope) {
  $scope.master = { topCap: "Top Line", bottomCap: "Bottom Line" };
  $scope.update = function(caption) {
    $scope.master = angular.copy(caption);
  };
  $scope.reset = function() {
    $scope.caption = angular.copy($scope.master);
  };
  $scope.reset();
}]);

问题是,我不能在字段上使用required,因为只有一个字段是必需的,因此我从未将ng invalid类添加到输入中,因此,尽管两个字段都可能为空,并且我有一个禁用的提交按钮,但如果两个字段都为空,我希望添加一个类。

有没有一种方法可以将一个类添加到字段中,如果它们都被触动了,但都是空的?顺便说一句,它们是在页面加载时预先填充的。

共有2个答案

万选
2023-03-14

可能需要使用ng

input(ng-required="!caption.bottomCap, ng-model="caption.topCap")
input(ng-required="!caption.topCap, ng-model="caption.bottomCap")
洪增
2023-03-14

ng required允许您使用表达式设置字段是否应标记为required,您可以使字段在此处相互引用值。有关详细信息和一个非常好的工作示例,请参见以下问题的回答:如何有条件地要求使用AngularJS进行表单输入?

 类似资料:
  • 我试图使用Angularjs验证来在列表中至少有一个输入被填写时启用按钮。我所做的工作类似于下面的w3schools示例: 用角验证做这件事的最好方法是什么?

  • 问题内容: 给定一个简单的html形式,如下所示: 如果至少有一项输入为空,我需要您的帮助来知道如何检查验证时间。所需的验证如下。用户必须至少完成一个首选项。 使用jQuery的这: 可以,但是想弄清楚如何使用angular来做同样的事情。 非常感谢 吉列尔莫 问题答案: 因此,想法是如果所有输入均为空白,则禁用提交按钮。你可以这样 是强制转换为值。并且和都被评估为。

  • 我想有一个没有自定义指令的解决方案,但如果这不能实现没有它,我会处理它。下面是一个用自定义指令解决类似问题的答案。 感谢您的帮助,谢谢

  • 问题内容: 我正在尝试使用AngularJS进行表单验证。我对比较两个值特别感兴趣。我希望用户在继续之前确认他输入的一些数据。可以说我有以下代码: 然后我可以将验证用于: registerForm。$ valid将对输入中的文本做出正确的反应,除非我不知道如何在此验证中使用比较来强制电子邮件保持一致,然后再允许用户提交表单。 我很想有一个没有自定义指令的解决方案,但是如果没有它就无法实现,我会处理

  • 问题内容: 我在AngularJS应用程序中创建了一个指令,该指令在我的应用程序中生成样式输入。看起来像这样: 它的模板是: 调用很简单: 我想为此字段创建验证,并添加了错误信息: 而showError是: 基本上,它是从《用AngularJS掌握Web应用程序开发》一书中复制的。我有一个问题,因为当我在控制台中登录表单时,我的名字是,而不是name属性,这里的值应该是“ name”。我究竟做错了

  • 我有一个带有一组相关复选框的ASP.NET webform。我想验证当单击提交按钮时,组中至少选中了一个复选框。我尝试过实现两种不同的解决方案,但都没有成功。当我尝试按类名返回选中复选框的长度时,收到0。当我尝试按名称返回ischecked值时,收到false。如果我查看页面的源,复选框具有“checked”属性。有人能检查我的html,让我知道我做错了什么吗?