我为我的登录页面使用了模板驱动的表单。如果输入元素无效或有任何错误,我想要一个红色边框,但是当输入为空白或无效时,borderRed
类并未添加在输入元素上。
<form (ngSubmit)="f.form.valid && signin()" #f="ngForm" class="m-login__form m-form" action="">
<ng-template #alertSignin></ng-template>
<div class="form-group form-md-line-input form-md-floating-label">
<label>
Email <span class="text-danger">*</span>
</label>
<input [class.borderRed]="email.invalid" class="form-control m-input" type="text" required="required" name="email" [(ngModel)]="model.email" #email="ngModel" autocomplete="off">
</div>
<div class="form-group form-md-line-input form-md-floating-label">
<label [pTooltip]="attachementTooltipmsg" tooltipPosition="top" for="form_control_1">
Password <span class="text-danger">*</span>
</label>
<input [class.borderRed]="password.invalid" class="form-control m-input" required="" name="password" type="password" [(ngModel)]="model.password" #password="ngModel">
</div>
<div class="m-login__form-action">
<button [disabled]="loading" [ngClass]="{'m-loader m-loader--right m-loader--light': loading}" id="m_login_signin_submit" class="btn btn-focus m-btn m-btn--pill m-btn--custom m-btn--air">
Sign In
</button>
</div>
</form>
使用此
<input [class.borderRed]="email.touched && !email.valid" class="form-control m-input" type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$" required name="email" [(ngModel)]="model.email" #email="ngModel" autocomplete="off">
查看Stackbiltz
编辑代码
Angular在输入是否有效时添加一些CSS类。您可以覆盖CSS以使其看起来按照自己的意愿。使用这种方法,您不必在每个输入上进行[class.borderRed]=...
。https://angular.io/guide/forms
.ng-valid[required], .ng-valid.required {
border: 1px solid green;
}
.ng-invalid:not(form) {
border: 1px solid red;
}
这应该有效
<input [ngClass]="{'borderRed':email.invalid}" class="form-control m-input" type="text" required="required" name="email" [(ngModel)]="model.email" #email="ngModel" autocomplete="off">
用于电子邮件验证的添加email
指令 <input type="email" name="email" ngModel email>
或者您可以使用pattern
属性,示例:
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="text"
[ngModel] = "user.email" name="email"
#email="ngModel" id="inputEmail"
placeholder="Email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$"
required>
</div>
<!-- This is the error section -->
<div *ngIf="email.invalid && (email.dirty || email.touched)"
class="alert alert-danger">
<div *ngIf = "email.errors?.required">
Email field can't be blank
</div>
<div *ngIf = "email.errors?.pattern && email.touched">
The email id doesn't seem right
</div>
</div>
也最好仅通过添加required
来标记所需的字段。对于密码输入,您可以使用此 minlength ="8"
这样的验证器。
通常,您必须指定验证规则。在反应性形式中,您将在组件类中指定:
this.myForm = this.f.group({
name: ['', Validators.required ],
});
您可以执行此操作。这对我有用: -
<div class="form-group" [class.has-error]="fullnameControl.invalid && (fullnameControl.dirty || fullnameControl.touched)"
[class.has-success]="fullnameControl.valid">
<label class="control-label">Full Name Field </label>
<input
type="text"
required
class="form-control"
name="fullname"
id="fullname" [(ngModel)]="fullname"
#fullnameControl="ngModel"
/>
<span class="help-block"
*ngIf="fullnameControl.invalid && (fullnameControl.dirty
|| fullnameControl.touched)">Full Name is required. </span>
</div>
使用ngclass动态添加不同的类。示例:
<input class="form-control" id="firstName" name="firstName" type="text" placeholder="First Name" formControlName="firstName" [ngClass]="{
'has-success': firstName.valid,
'has-danger': (firstName.invalid && firstName.dirty) || (!isFormSubmitted && firstName.invalid)}">
如果 firstName 无效而肮脏(用户实际触摸了此字段(,然后添加 hast-danger class。>是有效的,然后添加 has-success class。
注意: firstName 是一个form-control