Error: Cannot assign to a reference or variable! Angular 4 [duplicate]
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.
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"