角2表单验证错误“未处理承诺拒绝：不能分配给一个或引用变量！”

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

我按照有关表单验证的官方文档：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，也有一个在我的课叫名字的变量，这将导致以下错误，当您尝试运行应用程序：

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! 

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