facing problem on using ngClass for multiple options

I am using reactive form using FormBuilder in Angular 8 Application , where i am using ngClass for multiple option

I am sharing some part of my code

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

Where I am getting error

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

Exlanation of [ngClass]="{(name.valid)?'validBox':('name.invalid')?'notValidBox'}" >>

if(name.valid){
// add class name validBox
}else if(name.valid){
// add class name notValidBox
}

I am sharing my full code

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

Solution

You need to change from name.valid to userSignup.get('name').valid to read a value from a ReactiveForm.

You can try the following syntax instead of the ternary operator with null:

<input [class.validBox]="userSignup.get('name').valid" [class.notValidBox]="userSignup.get('name').invalid" type="text" formControlName="name">

It should do exactly the same: Add the class validBox if userSignup.get('name').valid is true and add the class notValidBox if userSignup.get('name').invalid is true.