面临将 ngClass 用于多个选项的问题

Question

我在 Angular 8 应用程序中使用 FormBuilder 使用反应式表单， 我在哪里使用 ngClass 作为多个选项

我正在分享我的部分代码

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

哪里出错了

Parser Error: Unexpected token (, expected identifier, keyword, or string at column 2 in [{(name.valid)?'validBox':('name.invalid')?'notValidBox' : null }] in @16:38Angular

[ngClass]="{(name.valid)?'validBox':('name.invalid')?'notValidBox'}"的解释"=29 =] >>

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

Answer 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 为真，则添加 class validBox，如果 userSignup.get('name').invalid 为真，则添加 class notValidBox。

Answer 2

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

试试这个