angular4 學習記錄 -- 表單

angular4 表單

模板表單

在app.module中導入FormsModule以後，項目中的form表單都會是一個ngForm，也就是一個模板表單。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  exports: [],
  declarations: []
})
export class AppModule { }

在表單上添加的ngForm會攔截標準的hmlt表單提交事件。

ngModel和FormControl

1. 在表單元素中添加了ngmodel屬性，這表明着建立了一個FormControl控件。
2. 將第一步中的控件放至form中,Form會自動將該FormControl控件註冊爲Form的子控件。只有表單元素上在添加了ngModel的基礎上再添加name屬性，纔會將name=「nickname」的字段添加至表單控件上。
   例：

<form #myForm="ngForm">
        <input ngModel name="nickname" type="text">
    </form>
    {{myForm.value | json}}         //這裏將以{{"nickname": xxx}}輸出input輸入框中的內容

1. 單向數據綁定

   具體使用`[ngModel]="xxx"`

2. 雙向數據綁定

   具體使用`[(ngModel)]="xxx"`

ngModelGroup

簡單來講，是一組 FormControl

響應式表單

響應式表單中一些經常使用的類

1. AbstractControl是三個具體表單類的抽象基類。 併爲它們提供了一些共同的行爲和屬性，其中有些是可觀察對象（Observable）。
2. FormControl 用於跟蹤一個單獨的表單控件的值和有效性狀態。它對應於一個HTML表單控件，好比輸入框和下拉框。
3. FormGroup用於 跟蹤一組AbstractControl的實例的值和有效性狀態。 該組的屬性中包含了它的子控件。 組件中的頂級表單就是一個FormGroup。
4. FormArray用於跟蹤AbstractControl實例組成的有序數組的值和有效性狀態。

具體使用

在使用響應式表單以前，也須要在app.module中添加import。

import {ReactiveFormsModule} from "@angular/forms";
@NgModule({
  // 省略其餘
    imports: [..., ReactiveFormsModule],
  // 省略其餘
})
// 省略其餘

區別：響應式表單與模板表單最大的區別在於響應式表單並非直接地將form中的value直接綁定在html中的標籤上，而是隻是簡單地聲明瞭一下formControlName，再在component上將對應的formControlName的表單元素實例化FormControl

ngOnInit() {
    // 初始化表單
    this.user = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.pattern(/([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,4}/)]),
      password: new FormControl('', [Validators.required]),
      repeat: new FormControl('', [Validators.required]),
      address: new FormGroup({
        province: new FormControl(''),
        city: new FormControl(''),
        area: new FormControl(''),
        addr: new FormControl('')
      })
    });
}

FomBuilder

FormBuilder的存在就是爲了可以快速構建表單。具體使用形式：

constructor(private fb: FormBuilder) {}

ngOnInit() {
    // 初始化表單
    this.user = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required],
      repeat: ['', Validators.required],
      address: this.fb.group({
        province: [],
        city: [],
        area: [],
        addr: []
      })
    });
}

表單驗證

目前Angular支持的內置validate屬性：

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

如何判斷驗證的結果

經過表單控件的.valid判斷驗證結果，其結果狀態：

• valid - 有效
• invalid - 無效
• pristine - 表單值未改變
• dirty - 表單值已改變
• touched - 表單控件已被訪問過
• untouched - 表單控件未被訪問過

若是顯示驗證失敗的信息

1. 能夠直接在html中編寫驗證信息，經過設置[hidden]="!formModel.hasError('驗證結果')"屬性來顯示。
2. 在表單所在的component中的fomModel上添加{validator: xxxValidat0or}，再在指定的xxxValidator驗證方法中調用description來顯示驗證失敗信息。
   例：{password: {description: "密碼和確認密碼不匹配"}}

如何添加驗證信息的樣式

能夠經過如下類選擇器添加相應的樣式：

• .ng-valid
• .ng-invalid
• .ng-pristine
• .ng-dirty
• .touched
• .untouched