這篇文章給大家分享的是有關(guān)Angular中表單如何使用的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)成立于2013年,先為蒙自等服務(wù)建站,蒙自等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為蒙自企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。<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]$ 整數(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+)?))$
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 導(dǎo)出成了一個名叫 first 的局部變量。NgModel 把自己控制的 FormControl 實(shí)例的屬性映射出去,讓你能在模板中檢查控件的狀態(tài),比如 valid 和 dirtyngModel
的<input>
標(biāo)簽時,系統(tǒng)會自動為這個標(biāo)簽創(chuàng)建一個叫做FormControl
的對象,并且會自動把它添加到FormGroup
中。而FormControl
在FomGroup
中是用<input>
標(biāo)簽上的name
屬性來做標(biāo)識的,所以必須添加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 { } }
前端進(jìn)行重復(fù)性校驗(yàn),若使用keyup事件進(jìn)行判斷時,輸入已有的數(shù)據(jù)同時點(diǎn)擊鼠標(biāo),重復(fù)性校驗(yàn)會失效。
如果后端沒有給前端返回值,前端會報501錯誤
感謝各位的閱讀!關(guān)于Angular中表單如何使用就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
當(dāng)前文章:Angular中表單如何使用-創(chuàng)新互聯(lián)
標(biāo)題來源:http://muchs.cn/article16/hisgg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、網(wǎng)站維護(hù)、App設(shè)計、云服務(wù)器、網(wǎng)站導(dǎo)航、企業(yè)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容