基礎知識

Angular CLI 基本使用

安裝 Angular CLI (可選)

npm install -g @angular/cli

創建新的項目

ng new PROJECT-NAME

啟動本地服務器

cd PROJECT-NAMEng serve

Angular Forms 簡介

Angular 4 中有兩種表單：

Template Driven Forms - 模板驅動式表單 (類似于 AngularJS 1.x 中的表單 ) Reactive Forms - 響應式表單

本文主要介紹 Template Driven Forms (模板驅動式表單) 的基礎知識，相關的知識點會以問答的形式進行介紹。

第一節 - 創建最簡單的輸入框

如何實現雙向綁定？

在 Angular 表單中，我們通過 ngModel 指令來實現雙向綁定。

import { Component } from '@angular/core';@Component({ selector: 'app-root', template: `  <input type="text" [(ngModel)]="username">  {{username}} `,})export class AppComponent { username = 'semlinker';}

第二節 - 添加簡單的驗證功能

如何為表單控件添加驗證功能？

目前 Angular 支持的內建 validators 如下：

required - 設置表單控件值是非空的 email - 設置表單控件值的格式是 email minlength - 設置表單控件值的最小長度 maxlength - 設置表單控件值的最大長度 pattern - 設置表單控件的值需匹配 pattern 對應的模式

接下來我們來添加最簡單的 必填 校驗。

import { Component } from '@angular/core';@Component({ selector: 'app-root', template: `  <input    type="text"    required   [(ngModel)]="username">  {{username}} `,})export class AppComponent { username = 'semlinker';}

如何判斷表單控件是否通過驗證？

在 Angular 中，我們可以通過 #userName="ngModel" 方式獲取 ngModel 對象，然后通過 userName.valid 判斷表單控件是否通過驗證。

import { Component } from '@angular/core';@Component({ selector: 'app-root', template: `  <input    type="text"    required   [(ngModel)]="username"   #userName="ngModel">  {{userName.valid}} `,})export class AppComponent { username = 'semlinker';}

第三節 - 顯示驗證失敗的錯誤信息

如何顯示驗證失敗的錯誤信息？

在 Angular 中，我們可以通過 #userName="ngModel" 方式獲取 ngModel 對象，然后通過該對象的 errors 屬性，來獲取對應驗證規則 (如 required, minlength 等) 的驗證狀態。

import { Component } from '@angular/core';@Component({ selector: 'app-root', template: `  <input    type="text"    required   minlength="3"   [(ngModel)]="username"   #userName="ngModel">  <hr>  <div *ngIf="userName.errors?.required">請您輸入用戶名</div>  <div *ngIf="userName.errors?.minlength">   用戶名的長度必須大于 {{userName.errors?.minlength.requiredLength}}，當前的長度為    {{userName.errors?.minlength.actualLength}}  </div> `,})export class AppComponent { username = 'semlinker';}