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

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

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

<input type="text" name="time" onfocus="this.select();" />

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

<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]$
整數(shù)：^-?d+$
浮點數(shù):^(-?d+)(.d+)?$
正浮點數(shù)：^(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$
負浮點數(shù) ^(-(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*)))$
非負浮點數(shù)（正浮點數(shù) + 0）：^d+(.d+)?$
非正浮點數(shù)（負浮點數(shù) + 0） ^((-d+(.d+)?)|(0+(.0+)?))$

關(guān)于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
  }
}

• #first="ngModel" 把 NgModel 導(dǎo)出成了一個名叫 first 的局部變量。NgModel 把自己控制的 FormControl 實例的屬性映射出去，讓你能在模板中檢查控件的狀態(tài)，比如 valid 和 dirty
• 使用帶有ngModel的<input>標簽時，系統(tǒng)會自動為這個標簽創(chuàng)建一個叫做FormControl的對象，并且會自動把它添加到FormGroup中。而FormControl在FomGroup中是用<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事件的區(qū)別

前端進行重復(fù)性校驗，若使用keyup事件進行判斷時，輸入已有的數(shù)據(jù)同時點擊鼠標，重復(fù)性校驗會失效。

ngif的小問題

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

501

如果后端沒有給前端返回值，前端會報501錯誤

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

當(dāng)前文章：Angular中表單如何使用-創(chuàng)新互聯(lián)
標題來源：http://jinyejixie.com/article16/hisgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站維護、App設(shè)計、云服務(wù)器、網(wǎng)站導(dǎo)航、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)