AngularJS中的客户端验证

Question

我正在学习AngularJS，遇到了一个关于客户端验证表单输入的问题。我的Yii2中有一个REST API和一个在服务器端验证的注册表单。我想添加一些客户端验证。下面是一个输入框的代码（其他输入框的代码基本相同）：

<form ng-submit="register()" name="registerForm" id="register-form" method="post" role="form" novalidate>
    <div ng-class="{ 'has-success': (!error['login'] && submitted) || (registerForm.login.$touched && registerForm.login.$valid),
    'has-error': (error['login'] && submitted) || (registerForm.login.$touched && registerForm.login.$invalid) }"
     class="form-group">
     <label class="control-label" for="login">Username</label>
     <input ng-model="registrationForm.login" type="text" id="login" class="form-control" name="login" required>
     <p class="help-block help-block-error">{{ error['login'] }}</p>
     <p class="help-block" ng-show="registerForm.login.$invalid && registerForm.login.$touched">This field is required.</p>
</div>
... (other inputs)
</form>

一些解释：如果输入有效，则应设置has-success - 第一个括号用于服务器端验证，第二个括号用于客户端。 - 第一个help-block显示服务端验证错误 - 第二个help-block显示客户端验证错误

问题： 客户端验证中出现错误时不会显示。此外，整个div类未设置。

我做错了什么？

编辑： 添加了包装输入的表单。

- Kamil Cierczek

---

首先，我认为您在这段代码片段中缺少表单元素。您是否有一个名为“registerForm”的表单，它包装了文本字段？如果是这样，最好将其添加到代码片段中。 - asulaiman

Answer 1

您缺少封装输入字段的表单。Angular验证是在表单级别完成的，您无法验证独立的输入字段（除非使用ng-form指令- https://docs.angularjs.org/api/ng/directive/ngForm）。当您使用与验证相关联的正确名称的表单时，验证错误将出现。

在此plunk中进行验证

<div ng-class="{ 'has-success': (!error['login'] && submitted) || (registerForm.login.$touched && registerForm.login.$valid),
'has-error': registerForm.login.$touched && registerForm.login.$invalid }" class="form-group">
<form name="registerForm">
  <label class="control-label" for="login">Username</label>
  <input ng-model="registrationForm.login" type="text" id="login" class="form-control" name="login" required>
</form>
<p class="help-block" ng-show="registerForm.login.$invalid && registerForm.login.$touched">This field is required.</p>

- asulaiman

---

嗨， 我的错。这只是表单的一部分。我已经将所有输入都包装在名为“registerForm”的表单中，并在控制器范围内实现了一个名为“register（）”的操作。 - Kamil Cierczek

在这种情况下，我无法重现你的问题。如果您打开我发布的 Plunk，您会注意到 CSS 类和 ng-show 在验证失败的情况下按预期工作。我已更新 Plunk，以包含“has-error”类样式来演示这一点。 - asulaiman