基于模板的表单
定义
在模板中定义表单以及验证细节
基本表单
<!-- 基本表单 -->
<form class="bordered">
<div class="form-group">
<label for="username">姓名:</label>
<input type="text" class="form-control" name="username" id="username" [(ngModel)]="product.username" />
</div>
<button class="btn btn-primary" (click)="addName()">提交</button>
</form>
product={};
addName(){
console.log(this.product);
}
※使用[(ngModel)]必须引入模块@angular/forms中的FormsModule模块
表单验证
-
angular 内置验证属性
required 指定必填的数据
minlength 指定最小字符数
maxlength 指定最大字符数。不能直接应用于表单元素,因为与同名的html5属性冲突。它可以与基于模型的表单一起使用
pattern 指定用户填充的值必须符合正则表达式
-
限制
angular要求验证元素必须定义name属性
必须存在form元素时,angular验证功能才起作用
form中添加了novalidate属性,浏览器才知道不会使用原生的验证功能
-
表单提交
form的ngSubmit事件表单
button的click事件提交表单
-
示例代码
<!-- 表单验证 -->
<form novalidate (ngSubmit)="addName()">
<div class="form-group">
<label for="username">姓名:</label>
<input type="text" class="form-control"
name="username" id="username" [(ngModel)]="product.username"
required
minlength="5"
pattern="^[A-Za-z ]+$" />
</div>
<button class="btn btn-primary" >提交</button>
</form>
验证类样式化元素
- ng-touched(是) ng-untouched(否)
元素是否被用户访问
- ng-pristine(否) ng-dirty(是)
元素的内容是否被改变(改变后又恢复原值,还会保留在ng-dirty)
- ng-valid(是) ng-unvalid(否)
元素的内容是否符合验证的所有规则
<!-- 表单验证 -->
<form novalidate (ngSubmit)="addName()">
<div class="form-group">
<label for="username">姓名:</label>
<input type="text" class="form-control"
name="username" id="username" [(ngModel)]="product.username"
required
minlength="5"
pattern="^[A-Za-z ]+$" />
</div>
<button class="btn btn-primary" type="submit">提交</button>
</form>
input.ng-dirty.ng-valid{
border:2px solid green;
}
input.ng-dirty.ng-invalid{
border:2px solid red;
}
input.ng-touched.ng-invalid{
border:2px solid red;
}
域级验证消息
- ngModel可以用来访问宿主元素的验证状态
- 模板引用变量获取宿主元素的ngModel
- 模板引用变量属性
path 元素的名称
valid 为true 有效
invalid 为true 无效
pristine 未更改
dirty 更改
touched 访问元素
untouched 未访问元素
errors 返回一个对象,它的每个属性代表一个验证错误
value 返回元素的值,用于自定义验证规则
※ 可以使用安全导航防止属性为null 如:username.errors?
.required?代表如果errors为null或undefined则不尝试访问它的属性
- errors的属性
required required属性被用于input元素时返回为true
minlength.requiredLength 满足minlength规则所需要的字符
minlength.actualLength 用户输入的字符数
pattern.requiredPattern 使用pattern属性指定的正则表达式
pattern.actualValue 返回元素的内容
<!-- 表单验证 -->
<form novalidate (ngSubmit)="addName()">
<div class="form-group">
<label for="username">姓名:</label>
<input type="text" class="form-control"
name="username" id="username" [(ngModel)]="product.username"
required
minlength="5"
pattern="^[A-Za-z ]+$"
#username="ngModel"/>
</div>
<ul class="text-danger list-unstyled" *ngIf="(username.dirty || username.touched) && username.invalid">
<li *ngIf="username.errors.required">
请输入用户名!
</li>
<li *ngIf="username.errors.minlength">
用户名不能少于5个字符
</li>
<li *ngIf="username.errors.pattern">
只能使用字符和空格
</li>
</ul>
<div class="form-group">
<label for="password">密码</label>
<input type="text" class="form-control"
name="password" id="username" [(ngModel)]="product.password"
required
minlength="5"
pattern="^[A-Za-z ]+$" />
</div>
<button class="btn btn-primary" type="submit">提交</button>
</form>
使用组件显示验证消息
oproduct={};
getValidateMsg(state:any, tingName?:string){
let tring = state.path || tingName;
let msg = []
if(state.errors){
for (let error in state.errors) {
switch (error) {
case "required":
msg.push(`You must enter a ${tring}`);
break;
case "minlength":
msg.push(`至少:${state.errors['minlength'].requiredLength}`);
break;
default:
break;
}
}
}
return msg;
}
<form novalidate (ngSubmit)="addName()">
<div class="form-group">
<label for="username">姓名:</label>
<input type="text" class="form-control"
name="username" id="username" [(ngModel)]="oproduct.username"
required
minlength="5"
pattern="^[A-Za-z ]+$"
#username1="ngModel"/>
</div>
<ul class="text-danger list-unstyled" *ngIf="username1.dirty && username1.invalid">
<li *ngFor="let error of getValidateMsg(username1)">
{{error}}
</li>
</ul>
<button class="btn btn-primary" type="submit">提交</button>
</form>
验证整个form
- 组件进入NgForm指令,并赋值给模板引用变量
- 将form以实参传入
- form.valid true 代表验证通过,否则说明有问题
- form.reset() 可以重置表单为最初未访问状态
<form novalidate #myform="ngForm" (ngSubmit)="submit(myform)">
<div class="bg-danger" *ngIf="formSubmited && myform.invalid">
有问题!
</div>
<div class="form-group">
<label for="username">姓名:</label>
<input type="text" class="form-control"
name="username" id="username" [(ngModel)]="product.username"
required
minlength="5"
pattern="^[A-Za-z ]+$"
#username="ngModel"/>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="text" class="form-control"
name="password" id="username" [(ngModel)]="product.password"
required
minlength="5"
pattern="^[A-Za-z ]+$" />
</div>
<button class="btn btn-primary" type="submit">提交</button>
</form>
禁用提交按钮
在提交或表单数据无效时,表单按钮应该设置为禁用
[disabled]="formSubmited && myform.invalid"