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表单上赋值给模板局部变量
• 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);}

四、表单的状态

五、angular表单中内置的表单校验有

六、angular表单中内置的样式

<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;
}

七、项目案例下载地址

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！