如果在模板驱动形式Angular 4中它无效,为什么class不应用于input
发布时间:2020-12-17 07:09:47 所属栏目:安全 来源:网络整理
导读:我在登录页面使用了模板驱动的表单.我想在输入元素上有一个红色边框,如果它们无效或有任何错误,但当输入为空或无效时,未在输入元素上添加类borderRed. form (ngSubmit)="f.form.valid signin()" #f="ngForm" class="m-login__form m-form" action="" ng-temp
我在登录页面使用了模板驱动的表单.我想在输入元素上有一个红色边框,如果它们无效或有任何错误,但当输入为空或无效时,未在输入元素上添加类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 Edited code (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |