本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家分享一些Angular表单相关的知识点。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。相关教程推荐:《angularjs视频教程》
点击输入框,全选内容
1 | <input type= "text" name= "time" onfocus= "this.select();" />
|
点击输入框,清空内容
1 | <input type= "text" name= "time" onclick= "this.value=''" /></td>
|
通过事件获取输入框的值
1 | (<HTMLInputElement>event.target).value
|
value与ngValue
1 2 | [value]= "..." 仅支持字符串值
[ngValue]= "..." 支持任何类型
|
常用的正则表达式
1 2 3 4 5 6 7 | 取值范围20-360:^(([2-9][0-9])|([1-2][0-9][0-9])|([3][0-5][0-9]))$|^[3][6][0]$
整数:^-?d+$
浮点数:^(-?d+)(.d+)?$
正浮点数:^(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$
负浮点数 ^(-(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*)))$
非负浮点数(正浮点数 + 0):^d+(.d+)?$
非正浮点数(负浮点数 + 0) ^((-d+(.d+)?)|(0+(.0+)?))$
|
关于ngForm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | import {Component} from '@angular/core' ;
import {NgForm} from '@angular/forms' ;
@Component({
selector: 'example-app' ,
template: `
<form #f= "ngForm" (ngSubmit)= "onSubmit(f)" novalidate>
<input name= "first" ngModel required #first= "ngModel" >
<input name= "last" ngModel>
<button>Submit</button>
</form>
<p>First name value: {{ first.value }}</p>
<p>First name valid: {{ first.valid }}</p>
<p>Form value: {{ f.value | json }}</p>
<p>Form valid: {{ f.valid }}</p>
`,
})
export class SimpleFormComp {
onSubmit(f: NgForm) {
console.log(f.value);
console.log(f.valid);
}
}
|
#first="ngModel"
把 NgModel 导出成了一个名叫 first 的局部变量。NgModel 把自己控制的 FormControl 实例的属性映射出去,让你能在模板中检查控件的状态,比如 valid 和 dirty- 使用带有
ngModel
的<input>
标签时,系统会自动为这个标签创建一个叫做FormControl
的对象,并且会自动把它添加到FormGroup
中。而FormControl
在FomGroup
中是用<input>
标签上的name
属性来做标识的,所以必须添加name
属性。
HTML5中新的input类型
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | import { Component, OnInit } from '@angular/core' ;
import {Data} from "popper.js" ;
@Component({
selector: 'app-test-data' ,
template: `
<p> test-data works! </p> <input type= "date" [(ngModel)]= "date" >{{ date }}<br>
<input type= "month" [(ngModel)]= "month" >{{month}}<br>
<input type= "week" [(ngModel)]= "week" >{{week}}<br>
<input type= "time" [(ngModel)]= "time" >{{time}}<br>
<input type= "datetime-local" [(ngModel)]= "datetimeLocal" >{{datetimeLocal}}
<input id= "myCar" list= "cars" />
<datalist id= "cars" >
<option value= "BMW" >
<option value= "Ford" >
<option value= "Volvo" >
</datalist> `,
styles: [
]
})
export class TestDataComponent implements OnInit {
date :string;
month:string;
week:string;
time:string;
datetimeLocal:string;
constructor() { }
ngOnInit(): void {
}
}
|
keyup事件和input事件的区别
前端进行重复性校验,若使用keyup事件进行判断时,输入已有的数据同时点击鼠标,重复性校验会失效。
ngif的小问题
- ngif控制是否出现的input内容,没办法用#绑定来验证有效性,但可以用hidden实现相似功能
501
如果后端没有给前端返回值,前端会报501错误
更多编程相关知识,请访问:编程视频课程!!
以上就是分享Angular中关于表单的一些知识点的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
浅谈Angular中的模块(ngmodule),延迟加载模块
聊聊typescript中enum(枚举)的用法
服务器上webpack打包的过期hash文件如何进行清理
typescript symbols
浅谈Angular组件的交互方式
详解css和js动画底层原理及如何优化它们的性能
vue中如何集成css框架?方法介绍
详解Angular中的路由及其用法
Angular入门学习之环境和项目的搭建
13道前端vue面试题分享(附答案解析)
更多相关阅读请进入《Angular》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 分享Angular中关于表单的一些知识点