Error: Cannot assign to a reference or variable! Angular 4 [duplicate]

Question

I am getting an error in angular 4 after adding some new html code, earlier the form was working fine. I tried commenting the new the code but its still isnt working - what to do - I researched this error and tried solving but nothing helped - nor am I getting the exact location of the problem

My Code:

<form role="form" #adminForm="ngForm" (ngSubmit)="logAdmin(adminForm.form)">
          <div class="form-group">
            <input class="form-control" [(ngModel)]="adminUsername" #adminUsername="ngModel" placeholder="Username" type="text" name="adminUsername"
              required>
            <div *ngIf="adminUsername.touched && adminUsername.errors">
              <div class="alert alert-danger" *ngIf="adminUsername.errors.required">Username is required</div>
            </div>
          </div>
          <div class="form-group">
            <input class="form-control" [(ngModel)]="passwordText" #adminPassword="ngModel" id="adminPassword" name="adminPassword" placeholder="Password"
              type="password" required>
          </div>
          <div class="alert alert-danger" *ngIf="adminPassword.touched && adminPassword.errors">Password is required</div>
          <div class="col-md-6" style="text-align: right">
            <button type="submit" class="btn-yellow" [disabled]="!adminForm.valid">Log In</button>
          </div>
        </form>

Error I am getting :

Error: Cannot assign to a reference or variable!
    at _AstToIrVisitor.visitPropertyWrite (webpack-internal:///../../../compiler/esm5/compiler.js:26550:23)
    at PropertyWrite.visit (webpack-internal:///../../../compiler/esm5/compiler.js:4895:24)
    at convertActionBinding (webpack-internal:///../../../compiler/esm5/compiler.js:26000:45)
    at eval (webpack-internal:///../../../compiler/esm5/compiler.js:28519:22)
    at Array.forEach (<anonymous>)
    at ViewBuilder._createElementHandleEventFn (webpack-internal:///../../../compiler/esm5/compiler.js:28515:18)
    at nodes.(anonymous function) (webpack-internal:///../../../compiler/esm5/compiler.js:27934:27)
    at eval (webpack-internal:///../../../compiler/esm5/compiler.js:28460:22)
    at Array.map (<anonymous>)
    at ViewBuilder._createNodeExpressions (webpack-internal:///../../../compiler/esm5/compiler.js:28459:56)
    at _AstToIrVisitor.visitPropertyWrite (webpack-internal:///../../../compiler/esm5/compiler.js:26550:23)
    at PropertyWrite.visit (webpack-internal:///../../../compiler/esm5/compiler.js:4895:24)
    at convertActionBinding (webpack-internal:///../../../compiler/esm5/compiler.js:26000:45)
    at eval (webpack-internal:///../../../compiler/esm5/compiler.js:28519:22)
    at Array.forEach (<anonymous>)
    at ViewBuilder._createElementHandleEventFn (webpack-internal:///../../../compiler/esm5/compiler.js:28515:18)
    at nodes.(anonymous function) (webpack-internal:///../../../compiler/esm5/compiler.js:27934:27)
    at eval (webpack-internal:///../../../compiler/esm5/compiler.js:28460:22)
    at Array.map (<anonymous>)
    at ViewBuilder._createNodeExpressions (webpack-internal:///../../../compiler/esm5/compiler.js:28459:56)
    at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:824:31)
    at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:795:17)
    at eval (webpack-internal:///../../../../zone.js/dist/zone.js:873:17)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:425:31)
    at Object.onInvokeTask (webpack-internal:///../../../core/esm5/core.js:4944:33)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:424:36)
    at Zone.runTask (webpack-internal:///../../../../zone.js/dist/zone.js:192:47)
    at drainMicroTaskQueue (webpack-internal:///../../../../zone.js/dist/zone.js:602:35)
    at <anonymous>

I searched on internet and found questions & answer for the same error - but I didnt got any solution which worked for me ... Thats why this error might be repeated but the answer seems to be different then many out there.

Q&A are welcomed, but make sure you search first, there are other questions and answers for this ;) — AVJT82
– AVJT82, Commented Dec 30, 2017 at 12:29
If you mark this as a duplicate, aren't you supposed to give us the question for which this is the duplicate? — MrBoJangles
– MrBoJangles, Commented Mar 22, 2019 at 20:41

Abdeali Chandanwala · Accepted Answer · 2018-02-03 06:15:17Z

413

The issue is that I had renamed the ngModel variable name exactly same

[(ngModel)]="adminUsername" #adminUsername="ngModel"

The Solution which worked for me

[(ngModel)]="adminUsernameText" #adminUsername="ngModel"

edited Feb 3, 2018 at 6:15

answered Dec 29, 2017 at 11:05

Abdeali Chandanwala

8,8886 gold badges33 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ponmari Subramanian Over a year ago

Great .. the error gone. then how to validate that in different names

Abdeali Chandanwala Over a year ago

@PonmariSubramanian - #adminUsername will be used inside the html code for validation checks and adminUsernameText is the variable in your ts file and it will be used there by other functions and code - by the way, adminUsernameText indicates two way binding of angular - I hope you got the point

Ponmari Subramanian Over a year ago

@AbdealiChandanwala Thanks,I check with my code.It's working.

Jeppe Over a year ago

I think it's annoying that the error-message doesn't contain the reference to where the problem occurred.

Charly Over a year ago

Note that you also get this error when attempting to assign a value to a context-given variable in the template -- something like let-localVar="outsideVar" and attempting to do something like (click)="localVar = !localVar"

|

Collectives™ on Stack Overflow

Error: Cannot assign to a reference or variable! Angular 4 [duplicate]

1 Answer 1

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Linked

Related