Angular 2表单验证错误“未处理的承诺拒绝:无法分配给引用或变量！" [英] Angular 2 Form Validation Error "Unhandled Promise rejection: Cannot assign to a reference or variable!"

问题描述

App.component.html

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

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

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?

欢呼

推荐答案

您应该更改组件变量或模板#name变量.他们正在发生冲突:

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

还将您的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>

这篇关于Angular 2表单验证错误“未处理的承诺拒绝:无法分配给引用或变量！"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！