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)" />