Got interpolation ({{}}) where expression was expected

I have the following HTML but i get the the exception. How to fix it ?

Parser Error: Got interpolation ({{}}) where expression was expected at column 48 in [!(editForm.controls.field_item_exportExpression_{{i}}?.dirty && editForm.controls.field_item_exportExpression_{{i}}?.invalid)]

<div class="form-group">
  <label class="form-control-label" for="field_exportExpression">exportExpression</label>
  <input class="form-control" type="text" id="field_item_exportExpression_{{i}}" name="item_exportExpression_{{i}}" [(ngModel)]="datatype.items[i].exportExpression" required>
  <div [hidden]="!(editForm.controls.field_item_exportExpression_{{i}}?.dirty && editForm.controls.field_item_exportExpression_{{i}}?.invalid)">
   <small class="form-text text-danger" [hidden]="!editForm.controls.field_item_exportExpression_{{i}}?.errors?.required" dpTranslate="dataconfiguration.validation.required"> This field is
                            required. </small>
 </div>
</div>

The following is not working. Saying unwanted token [ found.

[hidden]="!editForm.controls.['item_exportExpression_' + i]?.errors?.required 

The following is not complaining about [ but complaining Cannot read property '0' of undefined

 [hidden]="!editForm.controls.item_exportExpression_[ i]?.errors?.required 

Solution 1:

{{}} never goes together with [prop]="..." or (event)="..."

<small class="form-text text-danger" 
       [hidden]="!editForm.controls.['field_item_exportExpression_' + i]?.errors?.required" dpTranslate="dataconfiguration.validation.required"> This field is
                        required. 
</small>

Solution 2:

There are 4 types of bindings:

  • Property binding i.e. [] required to evaluate values
  • Model binding i.e. [()] required nothing special
  • Interpolation binding i.e. {{}} could be used with general attributes
  • Event binding i.e. () worked great with functions

To answer your question, something like this worked for us:

<input type="checkbox" [id]="['model-'+i]" [(ngModel)]="model" name="model-{{i}}" (change)="changeHandler($event)" />