以下方法适用于旧版 AngularJS:
尝试在表单提交或字段无效时动态添加验证类。使用表单名称并将'name'属性添加到输入框中。示例使用Bootstrap:
<div class="form-group" ng-class="{'has-error': myForm.$submitted && (myForm.username.$invalid && !myForm.username.$pristine)}">
<label class="col-sm-2 control-label" for="username">Username*</label>
<div class="col-sm-10 col-md-9">
<input ng-model="data.username" id="username" name="username" type="text" class="form-control input-md" required>
</div>
</div>
同样重要的是,您的表单具有ng-submit=""
属性:
<form name="myForm" ng-submit="checkSubmit()" novalidate>
<!-- input fields here -->
....
<button type="submit">Submit</button>
</form>
您还可以为表单添加一个可选的验证功能:
$scope.checkSubmit = function () {
if ($scope.myForm.$valid) {
alert('All good...');
}
else {
alert('Not all fields valid! Do something...');
}
}
现在,当您加载应用程序时,只有在表单提交或字段被触摸时才会添加类名为
'has-error'
的元素。
而不是:
!myForm.username.$pristine
您也可以使用:
myForm.username.$dirty
适用于新的Angular 2+
这基于Bootstrap 5.3和Angular 15/16,可能会在将来发生变化。
<div class="form-group">
<label>Password</label>
<input type="password" formControlName="password" class="form-control" [ngClass]="{'is-invalid': password?.errors != null}">
</div>
组件形式,请确保您已将myForm
更改为所需的表单变量。
get password() { return this.myForm.get("password") }