我在Angular 8 Application中使用FormBuilder使用反应形式，在其中我将ngClass用于多个选项
我正在分享部分代码
<input [ngClass]="{(name.valid)?'validBox':('name.invalid')?'notValidBox' : null }" type="text" formControlName='name'>
我哪里出错了
解析器错误：@ 16：38Angular中的[{{（name.valid）？'validBox':('name.invalid'）？'notValidBox'：null}）中第2列出现意外标记（，预期标识符，关键字或字符串）
[ngClass] =“ {（name.valid）？'validBox':('name.invalid'）？'notValidBox'}”的注释>>
if(name.valid){
// add class name validBox
}else if(name.valid){
// add class name notValidBox
}
我正在分享我的完整代码
<form [formGroup]="userSignup" (ngSubmit)="submitt()">
<div> <span> Name </span> <input [ngClass]="{(name.valid)?'validBox':('name.invalid')?'notValidBox' : null }" type="text" formControlName='name'> </div>
<div> <span> Username </span> <input type="text" formControlName='username'> </div>
<div> <span> Email </span> <input type="text" formControlName='emai'> </div>
<div> <span> Password </span> <input type="text" formControlName='password'> </div>
<div> <span> Confirm Password </span> <input type="text"> </div>
<!-- <div> <span> Country </span> <input type="text"> </div> -->
<div> <span> Job Title </span>
<select formControlName='jobTile'>
<option *ngFor="let jobsType of JobTitle" value= {{jobsType}}>
{{jobsType}}
</option>
</select>
</div>
<div> <span> Job Role </span> <input type="text" formControlName='jobRole'> </div>
<div> <span> Address </span> <input type="text" formControlName='address'> </div>
<div> <span> country </span>
<select formControlName='country' (ngModelChange)='setCountryCode($event)'>
<option *ngFor="let country of countries" value={{country.country_name}}>
{{country.country_name}}
</option>
</select>
</div>
<div> <span> Phone </span>
<span> {{country_code}} </span>
<!-- <select formControlName='country_iso_code'>
<option *ngFor="let country of countries" value={{country.id}}>
{{country.id}}
</option>
</select> -->
<input type="text" formControlName='phone' appOnlyNumber>
</div>
<div> <button type="submit" [disabled]="userSignup" >Submit </button> </div>
</form>
Ts：
userSignup = this.fb.group({
name: ['' , Validators.required ],
username: ['' , [Validators.required , Validators.minLength(6)]],
emai: ['' , [Validators.required , Validators.email , Validators.pattern('s/\. \{0,1\}/\. /g')]],
password: ['' , Validators.required],
phone: ['', Validators.required],
jobTile: ['' , Validators.required],
country: ['' , Validators.required],
country_iso_code : ['country' , Validators.required],
jobRole: ['' , Validators.required],
address: ['' , Validators.required]
});
您需要从更改name.valid为userSignup.get('name').valid从ReactiveForm读取值。
您可以尝试使用以下语法，而不是使用null的三元运算符：
<input [class.validBox]="userSignup.get('name').valid" [class.notValidBox]="userSignup.get('name').invalid" type="text" formControlName="name">
它应该做的完全一样：如果userSignup.get('name').valid为true，则添加类validBox，如果为true，则添加notValidBox类userSignup.get('name').invalid。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句