How to use of dynamic local template variable inside [ngClass] and ngIf

Question

I have the following HTML component in angular 4:

<div  *ngFor="let item of items; let i = index" class="row">
      <div class="col-md-7">
            <select 
              class="form-control form-control-sm" 
              name="durationTime{{i}}" 
              required 
              [(ngModel)]="item.durationTime"
              #durationTime{{i}}="ngModel"
              [ngClass]="{'is-valid': durationTime{{i}}.valid && durationTime{{i}}.touched, 'is-invalid': durationTime{{i}}.invalid && durationTime{{i}}.touched}">
                <option [ngValue]="null" disabled  selected>Elige</option>
                <option *ngFor="let item of durationTimes" [ngValue]="item"> {{item}} </option>
            </select>
            <small *ngIf="durationTime{{i}}.invalid && durationTime{{i}}.touched"
              class="form-text text-muted-error">
                !Debes seleccionar una opción!
            </small>
        </div>
    </div>

I need to validate the controls but I have this error:

Parser Error: Got interpolation ({{}}) where expression was expected at column 25 in [{'is-valid': durationTime{{i}}.valid && durationTime{{i}}.touched, 'is-invalid': durationTime{{i}}.invalid && durationTime{{i}}.touched}] in 

My question is how to use of local template variable inside [ngClass] and ngIf in angular 4?

Answer 1

You don't need to give a different name to the template reference variable in each iteration of the ngFor loop. Just give it a normal name, like #durationTime. The ngClass binding and the ngIf condition will use the instance of the variable specific to the iteration of the loop.

<div  *ngFor="let item of items; let i = index" class="row">
  <div class="col-md-7">
    <select 
      class="form-control form-control-sm" 
      name="durationTime{{i}}" 
      required 
      [(ngModel)]="item.durationTime"
      #durationTime="ngModel"
      [ngClass]="{'is-valid': durationTime.valid && durationTime.touched, 'is-invalid': durationTime.invalid && durationTime.touched}">
        <option [ngValue]="null" disabled  selected>Elige</option>
        <option *ngFor="let item of durationTimes" [ngValue]="item"> {{item}} </option>
    </select>
    <small *ngIf="durationTime.invalid && durationTime.touched"
      class="form-text text-muted-error">
        !Debes seleccionar una opción!
    </small>
  </div>
</div>