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>
原文地址:https://www.jb51.cc/html/226509.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。