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变量.他们碰撞了:
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>