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

Question

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

Possible duplicate of [Parser Error: Got interpolation ({{}}) where expression was expected](http://stackoverflow.com/questions/40203279/parser-error-got-interpolation-where-expression-was-expected) — jonrsharpe, Feb 25 '17 at 13:12
@jonrsharpe i saw that post already and he has $index which the answer says {{$index}} . my case i have i and i put in {{i}} dosent work. — Saurabh Kumar, Feb 25 '17 at 13:17
@jonrsharpe : i am one week old angular person and i dont care at all about rep — Saurabh Kumar, Feb 25 '17 at 13:19
Then put that research in the question - *"I read X and tried Y but Z happened"*. Otherwise, as above, people end up telling you things you already know. Again, this is something you should already be aware of (like the fact that serially downvoting is against the rules). — jonrsharpe, Feb 25 '17 at 13:39
Perhaps you can simplify the problem by moving the hidden="code" into your Component Class, and just have a function [hidden]="shouldHide()" that way everything is easier — Brian Ogden, Feb 25 '17 at 22:50
@BrianOgden : Could you please recommend in any tutorial of what you suggested. Since i am new to angular i am not quite able to follow you properly — Saurabh Kumar, Feb 25 '17 at 22:57
@SaurabhKumar you have many tutorials that you could follow, get a subscription to Pluralsight for a month or two for example and you will find great Angular2 tutorials, for example John Papa instructs a nice one — Brian Ogden, Feb 26 '17 at 23:31
You have a syntax error when you got the unwanted token found error. Remove the period before the open square bracket. — DSoa, Jan 11 '21 at 17:21

score 87 · Answer 1 · edited Dec 29 '17 at 16:42

87

{{}} 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>

edited Dec 29 '17 at 16:42

nbro

15,395
32
113
196

answered Feb 25 '17 at 13:14

Günter Zöchbauer

623,577
216
2,003
1,567

Zameer Ansari · Answer 2 · 2018-06-28T05:35:54.833

54

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

edited Jun 28 '18 at 05:35

answered Jun 22 '17 at 08:28

Zameer Ansari

28,977
24
140
219

The 'id' is bound to an array... is there any difference:`[id]="['model-'+i]"` vs `[id]="'model-'+i"`? – István Békési Jan 13 '20 at 14:35
@istibekesi If you implement both, does it make any difference as such? I have not worked on Angular since long, so not sure about it. – Zameer Ansari Jan 14 '20 at 10:10
1

There is no difference in the result, since `['anything'].toString() === 'anything'`... I was just wondering if is there any reason/practice to use this array syntax? (Most probably, there isn't.) – István Békési Jan 15 '20 at 10:38

Saurabh Kumar · Accepted Answer · 2017-02-26T08:34:50.707

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;
    }

how to declare control in component – Ravi Teja Nov 08 '19 at 07:04 — Ravi Teja, Nov 08 '19 at 07:04

score 6 · Answer 4 · answered Jan 22 '19 at 07:24

6

Use like this instead of interpolation

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

answered Jan 22 '19 at 07:24

Abdus Salam Azad

5,087
46
35

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

4 Answers4

Linked