将 ngClass 用于多个选项时面临问题答案

【问题标题】：facing problem on using ngClass for multiple options将 ngClass 用于多个选项时面临问题
【发布时间】：2019-10-10 09:01:33
【问题描述】：

我在 Angular 8 Application 中使用 FormBuilder 使用反应形式，我在哪里使用 ngClass 多个选项

我正在分享我的部分代码

 <input [ngClass]="{(name.valid)?'validBox':('name.invalid')?'notValidBox' : null }"     type="text" formControlName='name'>

哪里出错了

解析器错误：意外的标记（、预期的标识符、关键字或第 2 列的字符串 [{(name.valid)?'validBox':('name.invalid')?'notValidBox' : null }] in @16:38 角度

[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]
 });

【问题讨论】：

标签： angular angular7 angular-forms ng-class

【解决方案1】：

您需要从 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 为真，则添加类validBox，如果userSignup.get('name').invalid 为真，则添加类notValidBox。

【讨论】：

使用你的方式我得到问题 ::: 标识符“名称”未定义。

【解决方案2】：

 <input [ngClass]="[name.valid?'validBox':'',name.invalid?'notValidBox':'']" type="text" formControlName='name'>

试试这个

【讨论】：