Question

App.component.html

＆＃13;

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

＆＃13;

App.component.ts

＆＃13;

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

＆＃13;

我已按照有关表单验证的官方文档：https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#template1

有谁知道这个错误来自何处？

干杯

Answer 1

您应该更改组件变量或模板#name变量。他们正在相撞：

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

同时将您的String更改为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>

Answer 2

当您尝试使用现有变量的相同名称定义模板引用变量时会发生此错误，例如在这种情况下：

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

 }

正如您所看到的，输入上有模板引用变量#name，并且在我的类上还有一个名为name的变量，当您尝试运行应用程序时，这将导致以下错误：

   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!

解决方案是更改其中一个变量的名称。

Answer 3

我在[(ngModel)]中遇到了*ngFor的错误：

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

我必须这样做：

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

Answer 4

使用Angular 6表单

遇到此错误“ ERROR错误：未捕获（承诺）：错误：无法分配给引用或变量！”

为解决此问题，我更改了此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>

对此

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

参考名称和型号名称相同

Answer 5

此错误可能由不同原因弹出。我发现其中一个涉及到ngFor的使用。特别是在将ngModel绑定到迭代变量时：

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

这种模式会触发相同的密码错误。

Answer 6

对我来说，这是在* ngIf

中使用模板var声明模式

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

在生产模式下似乎被禁止

Angular 2表单验证错误＆＃34;未处理的Promise拒绝：无法分配给引用或变量！＆＃34;

6 个答案: