Angular 表單相關知識點

點擊輸入框，全選內容

<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
  }
}

• #first="ngModel" 把 NgModel 導出成了一個名叫 first 的局部變量。NgModel 把本身控制的 FormControl 實例的屬性映射出去，讓你能在模板中檢查控件的狀態，好比 valid 和 dirty
• 使用帶有ngModel的<input>標籤時，系統會自動爲這個標籤建立一個叫作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事件的區別

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

ngif的小問題

• ngif控制是否出現的input內容，沒辦法用#綁定來驗證有效性，但能夠用hidden實現類似功能

501

若是後端沒有給前端返回值，前端會報501錯誤