Angular中表单如何使用

这篇文章给大家分享的是有关Angular中表单如何使用的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联公司专业为企业提供路南网站建设、路南做网站、路南网站设计、路南网站制作等企业网站建设、网页设计与制作、路南企业网站模板建站服务,10多年路南做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

点击输入框,全选内容

点击输入框,清空内容

通过事件获取输入框的值

(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: `
    

First name value: {{ first.value }}

First name valid: {{ first.valid }}

Form value: {{ f.value | json }}

Form valid: {{ f.valid }}

`, }) 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标签时,系统会自动为这个标签创建一个叫做FormControl的对象,并且会自动把它添加到FormGroup中。而FormControlFomGroup中是用标签上的name属性来做标识的,所以必须添加name属性。

HTML5中新的input类型

import { Component, OnInit } from '@angular/core';
import {Data} from "popper.js";
@Component({
  selector: 'app-test-data',
 template: `
 

test-data works!

{{date}}
{{month}}
{{week}}
{{time}}
{{datetimeLocal}} `, 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中表单如何使用
网站路径:http://ybzwz.com/article/ggsdhp.html