Angular 2 表单验证错误“未处理的承诺拒绝：无法分配给引用或变量！”答案

【问题标题】：Angular 2 Form Validation Error "Unhandled Promise rejection: Cannot assign to a reference or variable!"Angular 2 表单验证错误“未处理的承诺拒绝：无法分配给引用或变量！”
【发布时间】：2017-07-15 05:41:40
【问题描述】：

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

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

请问有人知道这个错误是从哪里来的吗？

干杯

【问题讨论】：

name.error 这不能被访问，因为name 是一个字符串。将输入/表单 ID 从 name 更改为其他任何内容
更改我的输入表单的 id 并没有解决错误，您的意思是：
你都改了？你应该改变其中之一
你是如何在课堂上声明prettyName的？
我已将 prettyName 声明为字符串 (app.component.ts)。反正现在可以了，要更新代码了

标签： html forms validation angular

【解决方案1】：

对我来说，这是使用带有 *ngIf 的模板 var 声明模式

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

在生产模式下好像是禁止的

【讨论】：

【解决方案2】：

[(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]" ...

【讨论】：

【解决方案3】：

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

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

这种模式会触发同样的神秘错误。

【讨论】：

【解决方案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>

参考名称和型号名称相同

【讨论】：

【解决方案5】：

当您尝试定义与现有变量同名的模板引用变量时会发生此错误，例如在本例中：

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

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

【讨论】：

【解决方案6】：

您应该更改组件变量或模板#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>

【讨论】：

感谢您的回复，我已经按照您的要求更改了代码，但没有解决错误。你能检查一下我是否按照你的意思做吗？
你变化太大了。我会更新我的答案。您不应该更改 #name 和寻址此变量的模板变量