请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

模板之家 首页 教程频道 查看内容

分享Angular中关于表单的一些知识点

模板之家 2020-12-2 21:02

分享至 : QQ空间
收藏

本篇文章给大家分享一些Angular 表单相关的知识点。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

本篇文章给大家分享一些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
  }
}

1.png

  • #first="ngModel" 把 NgModel 导出成了一个名叫 first 的局部变量。NgModel 把自己控制的 FormControl 实例的属性映射出去,让你能在模板中检查控件的状态,比如 valid 和 dirty
  • 使用带有ngModel<input>标签时,系统会自动为这个标签创建一个叫做FormControl的对象,并且会自动把它添加到FormGroup中。而FormControlFomGroup中是用<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中关于表单的一些知识点的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章!


路过

雷人

握手

鲜花

鸡蛋
来自: 网络收集
文章评论0人参与
热门频道
  • ecshop微信小程序代生成服务 可选购小程序
  • 【可选购小程序】ecshop生鲜食品蔬菜水果特
  • 【可选购小程序】ecshop医药品保健药房网站
  • ecshop百货超市日用品网站 免费生成微信小
  • ecshop办公用品文具耗材设备 免费生成微信
  • 【可选购小程序】ecshop家居家纺床上用品源
  • 【可选购小程序】ecshop户外运动体育用品健
  • ecshop整站数据打包 带数据 适合申请支付、
  • ecshop跨境购海淘微信分销商城网站源码模板
  • ecshop服装服饰女装网站商城模板 oss php7
    推荐文章
  • 热门
  • 最新
返回顶部