Angular 2 Form Validation Error „Nicht behandelte Versprechen Ablehnung: Kann nicht an einem Referenz oder Variablen zuweisen!“

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

ich die offizielle Dokumentation über Formularvalidierung verfolgt haben: https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#template1

jemand kennt Woher kommt dieser Fehler bitte?

Prost

Answer 1

Sie sollten entweder Ihre Komponente Variable ändern oder Ihre Vorlage #name Variable. Sie kollidieren:

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

Ändern Sie auch Ihre String zu 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

Dieser Fehler tritt auf, wenn Sie versuchen, eine Vorlage Referenzvariable mit dem gleichen Namen einer vorhandenen Variablen zu definieren, wie zum Beispiel in diesem Fall:

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

} 

Wie Sie sehen können, gibt es die Vorlage Referenzgröße #name am Eingang und es gibt auch einen Variablennamen auf meiner Klasse genannt, wird dies den folgenden Fehler verursachen, wenn Sie versuchen, die Anwendung auszuführen:

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! 

Die Lösung besteht darin, den Namen einer Ihrer Variablen zu ändern.