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

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 ;) — AT82, Dec 30 '17 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, Mar 22 '19 at 20:41

Abdeali Chandanwala · Accepted Answer · 2018-02-03T06:15:17.493

411

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 03 '18 at 06:15

answered Dec 29 '17 at 11:05

Abdeali Chandanwala

8,449
6
31
45

1

Great .. the error gone. then how to validate that in different names – Ponmari Subramanian Mar 13 '19 at 11:15
7

@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 – Abdeali Chandanwala Mar 14 '19 at 09:55
@AbdealiChandanwala Thanks,I check with my code.It's working. – Ponmari Subramanian Mar 14 '19 at 09:57
37

I think it's annoying that the error-message doesn't contain the reference to where the problem occurred. – Jeppe Mar 17 '19 at 17:14
Why haven't this mentioned in the documentations? – Sameera K Jul 30 '19 at 10:13
2

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"` – Charly Aug 17 '19 at 04:43
Refer this link https://github.com/angular/angular/issues/32695 – Rama Krishna Nov 05 '20 at 10:23
Angular team could've emitted a better error message.... very cryptic error, thanks for the post and answer! – AlpharettaTechy Jan 31 '21 at 16:54

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

1 Answers1

Linked