分享Angular中关于表单的一些知识点
程序员文章站
2022-04-04 08:15:22
...
本篇文章给大家分享一些Angular表单相关的知识点。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
相关教程推荐:《angularjs视频教程》
点击输入框,全选内容
<input type="text" name="time" onfocus="this.select();" />
点击输入框,清空内容
<input type="text" name="time" onclick="this.value=''" /></td>
通过事件获取输入框的值
(<HTMLInputElement>event.target).value
value与ngValue
[value]="..." 仅支持字符串值 [ngValue]="..." 支持任何类型
常用的正则表达式
取值范围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
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); // { first: '', last: '' } console.log(f.valid); // false } }
-
#first="ngModel"
把 NgModel 导出成了一个名叫 first 的局部变量。NgModel 把自己控制的 FormControl 实例的属性映射出去,让你能在模板中检查控件的状态,比如 valid 和 dirty - 使用带有
ngModel
的<input>
标签时,系统会自动为这个标签创建一个叫做FormControl
的对象,并且会自动把它添加到FormGroup
中。而FormControl
在FomGroup
中是用<input>
标签上的name
属性来做标识的,所以必须添加name
属性。
HTML5中新的input类型
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中关于表单的一些知识点的详细内容,更多请关注其它相关文章!