分享Angular中關於表單的一些知識點

本篇文章跟大家分享一些Angular表單相關的知識點。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

相關教學推薦：《angularjs影片教學》

點選輸入框，全選內容

<input>

點選輸入框，清空內容

<input>

透過事件取得輸入框的值

(<htmlinputelement>event.target).value</htmlinputelement>

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

      <input>       <input>       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 導出了一個名叫first 的局部變數。 NgModel 把自己控制的FormControl 實例的屬性映射出去，讓你能在模板中檢查控制項的狀態，例如valid 和dirty
• 使用帶有ngModel的&lt;input&gt;標籤時，系統會自動為這個標籤建立一個叫做<code>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: `
 
 test-data works! 
 <input>{{date}}

 <input>{{month}}

 <input>{{week}}

 <input>{{time}}

 <input>{{datetimeLocal}}
 <input> 
  `,
 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中關於表單的一些知識點的詳細內容。更多資訊請關注PHP中文網其他相關文章！