这篇文章给大家分享的是有关Angular中表单如何使用的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。
计算
安全
数据库
网络和加速
企业服务
<input type="text" name="time" onfocus="this.select();" /><input type="text" name="time" onclick="this.value=''" /></td>(<HTMLInputElement>event.target).value[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+)?))$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 和 dirtyngModel的<input>标签时，系统会自动为这个标签创建一个叫做FormControl的对象，并且会自动把它添加到FormGroup中。而FormControl在FomGroup中是用<input>标签上的name属性来做标识的,所以必须添加name属性。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事件进行判断时，输入已有的数据同时点击鼠标，重复性校验会失效。
如果后端没有给前端返回值，前端会报501错误
感谢各位的阅读！关于Angular中表单如何使用就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
