javascript - maxlegth 不能使用 Angular 6 中的模板驱动形式
问题描述
我正在开发一种注册表单,我需要 maxlength 验证,但使用模板驱动的表单无法显示 maxlength 警报消息。
<input type="text" class="form-control" placeholder="Enter Name"maxlength="4"
name="name" [(ngModel)]="name" ngModel required #username="ngModel">
<div *ngIf="username.invalid && (username.dirty || username.touched)">
<p style="color:red;font-size:10px;" *ngIf='username.invalid.maxlength'>
You enter only 4 characters.
</p>
</div>
解决方案
尝试:
<form name="form" role="form" #form="ngForm">
<div class="form-group">
<label class="form-control-label" for="userName">UserName</label>
<input
type="userName"
class="form-control"
id="userName"
name="userName"
#userNameInput="ngModel" //ngModel variable and template variable should not be the same
[(ngModel)]="userName"
minlength=4
maxlength=50
required>
<div *ngIf="userNameInput.dirty && userNameInput.invalid">
<small class="form-text text-danger" *ngIf="userNameInput.errors.required">
Your userName is required.
</small>
<small class="form-text text-danger" *ngIf="userNameInput.errors.minlength">
Your userName is required to be at least 4 characters.
</small>
<small class="form-text text-danger" *ngIf="userNameInput.errors.maxlength">
Your username cannot be longer than 50 characters.
</small>
</div>
</div>
</form>
推荐阅读
- python-3.x - Pyarrow 表从现有列创建列
- c - C中指针向量的内存分配
- text-rendering - 使用 Harfbuzz 正确组合字符位置
- c# - 使用 Sockets 或 UdpClient 通过 LAN 广播 UDP 数据报时无法接收已知回复
- algorithm - 插入排序和合并排序的最坏和最好的运行时间是多少?
- javascript - 如何在不修改子项的情况下操作父项(css/react)
- javascript - React ag grid 条件单元格渲染器
- mysql - 节点 mysql 无法获得查询响应
- sql - Godaddy服务器中asp.net web api中的连接字符串
- git - 如何在 Git 中修复分离的头部