這篇文章給大家分享的是有關(guān)Angular中表單如何使用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)成立于2013年，先為蒙自等服務(wù)建站，蒙自等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為蒙自企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

點(diǎn)擊輸入框，全選內(nèi)容

點(diǎn)擊輸入框，清空內(nèi)容

通過(guò)事件獲取輸入框的值

(event.target).value

value與ngValue

[value]="..." 僅支持字符串值
[ngValue]="..." 支持任何類(lèi)型

常用的正則表達(dá)式

取值范圍20-360：^(([2-9][0-9])|([1-2][0-9][0-9])|([3][0-5][0-9]))$|^[3][6][0]$
整數(shù)：^-?d+$
浮點(diǎn)數(shù):^(-?d+)(.d+)?$
正浮點(diǎn)數(shù)：^(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$
負(fù)浮點(diǎn)數(shù) ^(-(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*)))$
非負(fù)浮點(diǎn)數(shù)（正浮點(diǎn)數(shù) + 0）：^d+(.d+)?$
非正浮點(diǎn)數(shù)（負(fù)浮點(diǎn)數(shù) + 0） ^((-d+(.d+)?)|(0+(.0+)?))$

關(guān)于ngForm

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    

      
      
      Submit
    

    
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 導(dǎo)出成了一個(gè)名叫 first 的局部變量。NgModel 把自己控制的 FormControl 實(shí)例的屬性映射出去，讓你能在模板中檢查控件的狀態(tài)，比如 valid 和 dirty
• 使用帶有ngModel的標(biāo)簽時(shí)，系統(tǒng)會(huì)自動(dòng)為這個(gè)標(biāo)簽創(chuàng)建一個(gè)叫做FormControl的對(duì)象，并且會(huì)自動(dòng)把它添加到FormGroup中。而FormControl在FomGroup中是用標(biāo)簽上的name屬性來(lái)做標(biāo)識(shí)的,所以必須添加name屬性。

HTML5中新的input類(lèi)型

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事件的區(qū)別

前端進(jìn)行重復(fù)性校驗(yàn)，若使用keyup事件進(jìn)行判斷時(shí)，輸入已有的數(shù)據(jù)同時(shí)點(diǎn)擊鼠標(biāo)，重復(fù)性校驗(yàn)會(huì)失效。

ngif的小問(wèn)題

• ngif控制是否出現(xiàn)的input內(nèi)容，沒(méi)辦法用#綁定來(lái)驗(yàn)證有效性，但可以用hidden實(shí)現(xiàn)相似功能

501

如果后端沒(méi)有給前端返回值，前端會(huì)報(bào)501錯(cuò)誤

感謝各位的閱讀！關(guān)于Angular中表單如何使用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站標(biāo)題：Angular中表單如何使用-創(chuàng)新互聯(lián)
分享地址：http://weahome.cn/article/hisgg.html