我正在学习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类未设置。
我做错了什么?
编辑: 添加了包装输入的表单。