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 - 第一个括号用于服务器端验证，第二个用于客户端验证。 - 第一个帮助块显示服务器端验证错误 - 第二个帮助块显示客户端验证错误

问题： 客户端验证错误无法显示。此外，整个div类没有设置。

我做错了什么？

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

Answer 1

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

Validated in this 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>

angularjs中的客户端验证

1 个答案: