facing problem on using ngClass for multiple options

Question

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

Akora · Accepted Answer · 2019-10-10 10:50:47Z

1

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.

edited Oct 10, 2019 at 10:50

answered Oct 10, 2019 at 9:11

Akora

8558 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anurag Ranjan Over a year ago

Using your way I am getting issue ::: Identifier 'name' is not defined.

Sagar Khatri · Accepted Answer · 2019-10-10 09:22:06Z

0

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

Try this

answered Oct 10, 2019 at 9:22

Sagar Khatri

6454 silver badges16 bronze badges

Collectives™ on Stack Overflow

facing problem on using ngClass for multiple options

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related