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

Question

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

Parser error: interpolation received ({{}}), where expression in 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> 

Does not work. Saying an unwanted token [ found.

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

Below do not complain about [ but complain Cannot read property '0' of undefined

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

Answer 1

template

 <div [hidden]="!checkIfInvalid(i, 'item_exportExpression_')"> <small class="form-text text-danger" [hidden]="isRequiredError(i, 'item_exportExpression_')" dpTranslate="dataconfiguration.validation.required"> This field is required. </small> </div> 

component

 checkIfInvalid( index: number, field: string ): boolean { const control = this.getControl( index, field ); if ( control && control.dirty && !control.valid ) { return true; } return false; } isRequiredError( index: number, field?: string ): boolean { const control = this.getControl( index, field ); if ( control && control.getError( "required" ) ) { return true; } return false; } 

Answer 2

{{}} never matches [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> 

Answer 3

There are 4 types of bindings:

• Property binding, i.e. [] Required to evaluate values
• Model binding i.e. [()] requires nothing special
• Interpolation binding, i.e. {{}} Can be used with common attributes.
• Event binding ie () works fine 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)" /> 

Answer 4

Use like this instead of interpolating

  <button class="btn btn-primary" title="Edit" (click)="showEditModal(record.id)"><i class="fa fa-edit"></i></button>