Angular开发(十)-关于表单的基本认识

一、

angular

表单提供的两种构建表单的方式

1、模板驱动-采用表单内置指令，内置的校验方式

2、模型驱动-采用自定义表单，自定义校验方式

二、模板局部变量的认识

在

DOM

元素上在变量前面加上一个

#

表示模板局部变量，类似传统的

javascript

中的

document.getElementById

<input type="text" #name1 id="name1" />
<input type="button" value="提交" (click)="get(name1)" />

get(name1:any){
console.log(name1);
console.log(name1.value);
console.log(name1.id);
}

三、

angular

表单的模板驱动几大指令

1、

ngForm

是控制整个

form

表单的

2、

ngModel

是表单数据绑定所在点

3、

ngModelGroup

是表单中分组的，常用于密码或者地址

使用方式

1、

ngForm

的使用方式直接写在

form

表单上赋值给模板局部变量

<form #myForm="ngForm"></form>

2、

ngModel

的使用分两种情况

如果要进行双向绑定就使用双向绑定的规范:

[(ngModle)]="xxx"

如果仅仅是根据

ngForm

获取表单的值那么就可以直接在表单中使用

ngModle

就可以

使用案例

<div class="container">
<div class="row">
<div class="col-md-6">
<form #myForm="ngForm" (ngSubmit)="doSubmit(myForm)">
<div class="form-group">
<label>用户名:</label>
<input type="text" class="form-control" name="username" placeholder="请输入用户名" [(ngModel)]="myform.username" />
</div>
<fieldset ngModelGroup="passwordGroup">
<div class="form-group">
<label>输入密码:</label>
<input type="password" class="form-control" [(ngModel)]="myform.first" name="password" placeholder="请输入密码" />
</div>
<div class="form-group">
<label>确认密码:</label>
<input type="password" class="form-control" [(ngModel)]="myform.last" name="repeatpassword" placeholder="请确认密码" />
</div>
</fieldset>
<div class="form-group">
<label>选择性别:</label>
<div class="radio">
<label>
<input type="radio" name="sex" value="男" [(ngModel)]="myform.sex"/>男
</label>
<label>
<input type="radio" name="sex" value="女" [(ngModel)]="myform.sex"/>女
</label>
</div>
</div>
<div class="form-group">
<label>请选择省份:</label>
<select name="province" ngModel class="form-control">
<option *ngFor="let item of myform.province" value="{{item.value}}">{{item.display}}</option>
</select>
</div>
<div class="form-group">
<label>请选择省份:</label>
<select name="province1" ngModel class="form-control">
<option *ngFor="let item of myform.province" [ngValue]="item">{{item.display}}</option>
</select>
</div>
<div class="form-group">
<label>是否记住密码:</label>
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox" name="isSave" [(ngModel)]="myform.isSave" value=""/>是
</label>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="提交" />
</div>
</form>
</div>
<div class="col-md-6">
<div>{{myForm.value | json:"2"}}</div>
</div>
</div>
</div>

....
myform:any = {
username:"张三",
sex:"男",
isSave:true,
first:"",
last:"",
province:[
{value:"0",display:"广东省"},
{value:"1",display:"广西省"},
{value:"2",display:"湖南省"},
{value:"3",display:"福建省"}
]
}
constructor() { }

ngOnInit() {
}
//提交表单数据
doSubmit(myForm:any){
console.log(myForm.value);
}

四、表单的状态

状态	说明	备注
valid	表单值是否有效
pristine	表单值是否未改变
dirty	表单值是否已改变
touched	表单是否已经被访问
untouched	表单是否未被访问过

五、

angular

表单中内置的表单校验有

规则	描述	说明
required	必填字段
minlength	最小长度
maxlength	最大长度
pattern	自己写正则

六、

angular

表单中内置的样式

状态	为true的时候的css类	为false的时候的css类
控件已经被访问了	ng-touched	ng-untouched
控件值已经发生改变	ng-dirty	ng-pristine
控件值是否有效	ng-valid	ng-invalid

<div class="form-group">
<label>用户名:</label>
<input type="text" class="form-control" #username="ngModel" name="username" placeholder="请输入用户名" [(ngModel)]="myform.username" required minlength=3 maxlength=6/>
<p [hidden]="username.valid || username.pristine" class="text-danger">用户名输入有误</p>
</div>

.ng-valid[name]{
border:1px solid #360;
}
.ng-invalid[name]{
border:1px solid #f00;
}
.ng-untouched[name]{
border:1px solid #ddd;
}

七、项目案例下载地址