Angular2 表单form
来源:互联网 发布:芒果tv php视频解析 编辑:程序博客网 时间:2024/06/05 11:32
angular2的表单主要用到了ngForm,ngModel,ngSubmit
ngSubmit对应的函数是我们提交表单调用的函数
angular2通过ngForm将按钮的禁用/启用状态和表单的有效性关联起来
#loginForm、#username和#userpwd都是angular2中的模板引用变量;
#username和#userpwd可以监控input输入框的状态,#loginForm可以用来监控表单的状态,通过这些状态可以进行输入错误提示以及表单提交控制。
HTML控件(比如input、select等)的状态主要包括:
pristine和dirty:控件是否使用过,或者理解成是否输入过内容
invalid和valid:控件输入是否有效
touched和untouched:控件是否已经被访问过
loginForm.form.valid用来判断form表单中的控件是否全部有效,
<form #loginForm="ngForm" (ngSubmit)="login(user)"> <div class="form-group"> <span>姓名</span> <input type="text" name="username" #username="ngModel" [(ngModel)]="user.name" required pattern="^[a-zA-Z][a-zA-Z0-9]*" minlength="6" maxlength="16"/> <span *ngIf="!username.pristine&&username.invalid||username.touched&&username.invalid">用户名由英文字母和数字组成的6-16位字符,以字母开头</span> </div> <div class="form-group"> <span>密码</span> <input type="password" name="userpwd" #userpwd="ngModel" [(ngModel)]="user.pwd" required minlength="6"/> <span *ngIf="!userpwd.pristine&&userpwd.invalid||userpwd.touched&&userpwd.invalid">密码至少6个字符</span> </div> <button type="submit" [disabled]="!loginForm.form.valid">登陆</button></form>
在表单中需要注意的事项
1.在ng2表单中使用ngModel需要注意,必须带有name属性或者使用 [ngModelOptions]=”{standalone: true}”,二选其一
<form #testform="ngform"> <input name="username" [(ngModel)]=user.name /></form> <form #testform="ngform"> <input [ngModelOptions]="{standalone: true}" [(ngModel)]=user.name /></form>
如果未设置name或者ngModelOptions,就会报如下错误:
If ngModel is used within a form tag, either the name attribute must be set or the formcontrol must be defined as ‘standalone’ in ngModelOptions.
因为ngForm持有通过ngModel指令和name属性为各个元素创建的那些控件,并且监视它们的属性变化,包括有效性。 它还有自己的valid属性,只有当其中所有控件都有效时,它才有效。
2.使用button时需要注明type类型,未注明类型的button会默认为submit,当你点击一个非提交表单按钮时也会提交表单,所以要注明type=”button”
- angular2 之 form表单
- Angular2 表单form
- Angular2 之 Form 表单
- angular2 form
- Angular2错误收集一:加了form表单,没有给输入表单加name属性
- Angular2表单验证
- Angular2响应式表单
- angular2--笔记--表单创建
- Angular2 模版表单
- Angular2学习_2(表单)
- FORM表单
- 表单form
- form表单
- form表单
- form表单
- 表单(form)
- 表单form
- form 表单
- (十五)建造者模式详解(都市异能版)
- 归并排序-分治算法
- 堆
- Android动画----Scale
- 如何检测棋盘格
- Angular2 表单form
- js案例 移动端左右滑动touch+transform
- Tensorflow学习笔记
- 大话数据结构8之栈和队列2
- (十六)备忘录模式详解(都市异能版)
- Servlet 监听
- 栅栏染色-动态规划
- 那些年在WebView上踩过的坑
- 如何确定CPU是大端字节序还是小端字节序?