Angular 2 Form Validation Error "Unhandled Promise rejection: Cannot assign to a reference or variable!"

Question

App.component.html

<div class="container">
  <h2>Form Validation</h2>
  <form>
<div class="form-group">
  <label for="prettyName">Name</label>
  <input type="text" class="form-control" id="prettyName" required minlength="4" maxlength="20" [(ngModel)]="prettyName" name="prettyName" #name="ngModel">
  <div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger">
    <div [hidden]="!name.errors.required">
      Name is required
    </div>
    <div [hidden]="!name.errors.minlength">
      Name must be at least 4 characters long
    </div>
    <div [hidden]="!name.errors.maxlength">
      Name cannot be more than 20 characters long
    </div>
  </div>
</div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>
// ... (Same things for username, email and password)

App.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 prettyName: string;
  username: string;
  email: string;
  password: string;
}

I have followed the official documentation about form validation: https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#template1

Does anyone know where this error is coming from please?

Cheers

name.error This cant be accessed as name is a string. Change the input/form id from name to anything else — Suraj Rao
– Suraj Rao, Commented Feb 24, 2017 at 11:48
Changing the id of my input form has not resolve the error, you meant: <input type="text" id="prettyName etc...> ? — louisdeck
– louisdeck, Commented Feb 24, 2017 at 12:11
I have declared prettyName as a string (app.component.ts). Anyway, it is working now, going to update the code — louisdeck
– louisdeck, Commented Feb 24, 2017 at 13:09

Poul Kruijt · Accepted Answer · 2017-02-24 12:37:08Z

You should either change your component variable, or your template #name variable. They are colliding:

export class AppComponent {
  prettyname: string; // here
  username: string;
  email: string;
  password: string;
}

Also change your String to string

<form>
  <div class="form-group">
    <label for="prettyName">Name</label>
    <input type="text" class="form-control" id="prettyName" required minlength="4" maxlength="20" [(ngModel)]="prettyName" name="prettyName" #name="ngModel">
    <div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger">
      <div [hidden]="!name.errors.required">
        Name is required
      </div>
      <div [hidden]="!name.errors.minlength">
        Name must be at least 4 characters long
      </div>
      <div [hidden]="!name.errors.maxlength">
        Name cannot be more than 20 characters long
      </div>
    </div>
  </div>
<button type="submit" class="btn btn-default">Submit</button>

Thanks for the reply, I have changed the code as you told me, didn't resolve the error though. Can you just check if I have done what you meant please?
You've changed too much.. Ill update my answer. You should not have changed the #name and the template variables addressing this variable

Felix Runye · Accepted Answer · 2018-02-27 21:51:01Z

This error occurs when you try to define a template reference variable with the same name of an existing variable, like for example in this case:

    @Component({
    selector: 'example',
    template: `
       <label for="name">Name</label>
       <input type="text" [(ngModel)]="name" #name="ngModel" >
       `
    })
   export class AppComponent {
     name:string;

 }

As you can see, there’s the template reference variable #name on the input and there’s also a variable called name on my class, this will cause the following error when you try to run the application:

   zone.js:355 Unhandled Promise rejection: Cannot assign to a 
   reference or variable! ; Zone: <root> ; Task: Promise.then ; Value: 
   Error: Cannot assign to a reference or variable!(…) Error: Cannot 
   assign to a reference or variable!

the solution is to change the name of one of your variables.

Julien · Accepted Answer · 2020-02-07 10:56:39Z

4

I had that error with a [(ngModel)] inside a *ngFor :

<div *ngFor="let condition of rule.conditions; let i = index" class="condition">    
        <condition [(condition)]="condition" ...

I had to do this :

<div *ngFor="let condition of rule.conditions; let i = index" class="condition">    
        <condition [(condition)]="rule.conditions[i]" ...

answered Feb 7, 2020 at 10:56

Julien

2,7662 gold badges35 silver badges47 bronze badges

Comments

Alberto Chiesa · Accepted Answer · 2019-08-22 15:55:19Z

2

This error can popup with different causes. The one I found involves the use of ngFor. In particular, when binding ngModel to the iteration variable:

<div *ngFor="let item of items">
  <input [(ngModel)]="item" />
</div>

This kind of pattern will trigger the same cryptic error.

answered Aug 22, 2019 at 15:55

Alberto Chiesa

7,4602 gold badges35 silver badges61 bronze badges

Comments

Code Spy · Accepted Answer · 2018-10-05 09:10:04Z

Using Angular 6 Forms

encountered this error "ERROR Error: Uncaught (in promise): Error: Cannot assign to a reference or variable!"

To resolve this issue I changed this HTML

<input type="text" class="form-control" name="username" [(ngModel)]="username" placeholder="Username" required #username="ngModel"/>
<div [hidden]="username.valid || username.pristine" class="alert alert-danger">
  Name is required
</div>

To this

<input type="text" class="form-control" name="username" [(ngModel)]="username" placeholder="Username" required #usernameMsg="ngModel"/>
<div [hidden]="usernameMsg.valid || usernameMsg.pristine" class="alert alert-danger">
  Name is required
</div>

reference name and model name were same

Vincent Verrier · Accepted Answer · 2020-08-28 13:42:48Z

0

For me it was the use of the template var declaration pattern with *ngIf

<div *ngIf="10; let numVar">{{numVar}}</div>

It seems to be forbidden in production mode

answered Aug 28, 2020 at 13:42

Vincent Verrier

2413 silver badges5 bronze badges

Collectives™ on Stack Overflow

Angular 2 Form Validation Error "Unhandled Promise rejection: Cannot assign to a reference or variable!"

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related