сталкивается с проблемой при использовании ngClass для нескольких вариантов - PullRequest
Новая
       22

сталкивается с проблемой при использовании ngClass для нескольких вариантов

1 голос
/ 10 октября 2019

Я использую реактивную форму, используя FormBuilder в приложении Angular 8, где я использую ngClass для множественной опции

Я делюсь некоторой частью моего кода 

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

Где я получаю ошибку

Ошибка синтаксического анализатора: неожиданный токен (, ожидаемый идентификатор, ключевое слово или строка в столбце 2 в [{(name.valid)? 'ValidBox' :( 'name. неверный ')?' notValidBox ': null}] в @ 16: 38Angular

Объяснение [ngClass] = "{(name.valid)?' validBox ':(' name. неверный ')?' 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]
 });

Ответы [ 2 ]

1 голос
/ 10 октября 2019

Вам нужно изменить значение с name.valid на userSignup.get('name').valid, чтобы прочитать значение из ReactiveForm.

Вы можете попробовать следующий синтаксис вместо троичного оператора с нулем: 

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

Он должен делать то же самое: добавить класс validBox, если userSignup.get('name').valid истина, и добавить класс notValidBox, если userSignup.get('name').invalid истина.

0 голосов
/ 10 октября 2019 
 <input [ngClass]="[name.valid?'validBox':'',name.invalid?'notValidBox':'']" type="text" formControlName='name'>

Попробуйте это

...