使用AngularJS提交时将空输入字段设置为ng-invalid？

Posted 2023-03-05

【中文标题】使用AngularJS提交时将空输入字段设置为ng-invalid？

【英文标题】：Set empty input field to ng-invalid on submit using AngularJS?

【发布时间】：2014-04-02 05:31:01

【问题描述】：

如果用户单击提交并且使用 AngularJS 的表单字段为空，我想将输入字段设置为 ng-invalid。我知道一个指令可用于自定义表单验证并使用 $setValidity 手动设置输入字段，但我不确定我是否需要一个指令来突出显示提交时的空/必填字段。任何帮助将不胜感激。谢谢。

这是我正在使用的代码： html

<form name="SignUpForm ng-submit="submitUser()" novalidate>
<input type="text" name="dob" ng-model="dob" placeholder="Date of Birth" required />
<span class="error" ng-show="signUpForm.dob.$dirty && signUpForm.dob.$invalid">Please provide a valid date of birth</span>
<input type="text" name="email" ng-model="email" ng-pattern="/^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]2,9)$/" placeholder="Email" required />
<span class="error" ng-show="signUpForm.email.$dirty && signUpForm.email.$invalid">Please provide a valid email address</span>
<button type="submit">Submit</submit>
</form>

SASS/CSS

input 
&.ng-valid.ng-dirty 
color: #fff;
background-color: rgba(146, 253, 156, 0.5);
border-color: #92fd9c;
box-shadow: inset 2px 2px 2px #92fd9c;

&.ng-invalid.ng-dirty 
color: #850000;
background: rgba(254, 186, 186, 0.5);
border: 1px solid #850000;

AngularJS

$scope.submitUser = function() 
if ($scope.signUpForm.$valid) 
// Set form values & construct data to send
 else 
$scope.response = "Please fill in the required fields";

【参考方案1】：

我不确定我是否完全遵循，但这是否符合您的要求？

Plunker：

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

HTML：

<form name="signUpForm" ng-submit="submitUser()" novalidate>
<input type="text" ng-class=" errorinput: submitted && signUpForm.dob.$invalid " name="dob" ng-model="dob" placeholder="Date of Birth" required />
<span class="e" ng-show="submitted && signUpForm.dob.$invalid">Please provide a valid date of birth</span>
<br>
<input type="text" name="email" ng-class=" errorinput: submitted && signUpForm.email.$invalid " ng-model="email" ng-pattern="/^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]2,9)$/" placeholder="Email" required />
<span class="e" ng-show="submitted && signUpForm.email.$invalid">Please provide a valid email address</span>
<br>
<button type="submit">Submit</button>
</form>

Javascript：

$scope.submitUser = function() 
  if ($scope.signUpForm.$valid) 

   else 
    $scope.submitted = true;
  

【参考方案2】：

将 ng-class 添加到文本框等特定输入中，并在 HTML 上设置无效类。我正在使用 kendo-UI，所以我设置了 k-invalid: true 当它不符合条件时。

<input ng-class="'k-invalid': (condition === false)" required>

一旦条件为假，这将突出显示输入值。