簡單記錄一下最近學(xué)習(xí)的Angular Form相關(guān)知識啤誊，并實(shí)現(xiàn)一個(gè)「編輯-顯示」Demo风纠。

Form簡介

Angular包含兩種類型的form人柿，分別是Reactive forms與Template-driven forms积瞒。兩者異同以及適用場景在這里有詳細(xì)介紹摹恨。

Reactive forms與Template-driven forms在實(shí)現(xiàn)層面最大的不同在于：

• Reactive forms是在html元素中添加[formControl] directive，然后在ts文件中顯式地新建一個(gè)實(shí)例卓练，如下：

html:

<input type="text" [formControl]="xxxControl">

typescript:

...
export class XComponent {
  xxxControl = new FormControl('I am an init value');
}

• Template-driven forms是在html中添加[(ngModel)]隘蝎，ngModel的名字與類屬性名相同，FormControl的實(shí)例被隱式創(chuàng)建襟企。

html:

<input type="text" [(ngModel)]="xxxControl">

typescript:

...
export class XComponent {
  xxxControl = 'I am an init value';
}

Angular的一大特點(diǎn)就是view與model的雙向綁定嘱么，也就是說html的DOM元素與對應(yīng)的model始終是同步的。頁面input值改變顽悼，對應(yīng)的xxxControl值也改變曼振。

如果想通過model更改view几迄，對于Reactive forms，只需要this.xxxControl.setValue('new value')冰评；對于Template forms映胁，只需要this.xxxControl = 'new value'，view上的顯示就會隨之更改甲雅。

Reactive forms keep the data model pure by providing it as an immutable data structure. Each time a change is triggered on the data model, the FormControl instance returns a new data model rather than updating the existing data model.

Template-driven forms rely on mutability with two-way data binding to update the data model in the component as changes are made in the template.

了解到這些解孙，就可以實(shí)現(xiàn)一個(gè)簡單的demo。

Demo實(shí)現(xiàn)

這個(gè)Demo最終的效果是：

• 第一次進(jìn)入頁面抛人，顯示兩個(gè)標(biāo)簽（其實(shí)被disabled 的input）弛姜，分別是姓名與星座。
  
  init
• 點(diǎn)擊被disabled的input妖枚，會出現(xiàn)apply按鈕與cancel按鈕, 同時(shí)input變?yōu)榭删庉嫚顟B(tài)廷臼，用戶可以隨意輸入姓名與星座。
  
  editmode

  • 點(diǎn)擊apply盅惜，input被disabled,同時(shí)顯示修改后的值

    
    
    click apply

  • 點(diǎn)擊cancel中剩，input仍然顯示上次顯示的值。

    
    
    click cancel

分析

1. 頁面上有兩套控件抒寂，分別是一組可以與用戶交互的input结啼，以及一組被當(dāng)作標(biāo)簽使用的disabled input∏撸可以使用一個(gè)變量editMode控制顯示哪一組input郊愧，如果是可編輯的，則顯示可交互的input井佑，否則顯示disabled input属铁；
2. 初始狀態(tài)顯示的是disabled input，包括name與zodiac sign兩個(gè)input躬翁，兩者的默認(rèn)值可以內(nèi)置在代碼中焦蘑，或從其他地方讀取盒发；而可交互的那組默認(rèn)值則設(shè)置為從disabled input上取值例嘱，name與zodiac sign分別取對應(yīng)的值；
3. 點(diǎn)擊apply后宁舰，disabled input上的值設(shè)置為可交互的input上的值拼卵；
4. 點(diǎn)擊cancel后，可交互的 input上的值設(shè)置從disabled input上的值蛮艰。

實(shí)現(xiàn)

1. 如果用Reactive form, 則在app.module.ts的imports array中加入ReactiveFormsModule腋腮；如果用Template-driven form，則在importsarray中加入FormsModule.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 寫html頁面

app.component.html

<div *ngIf="editMode">
  name:
  <input  type="text" [formControl]="nameControl"/>
  zodiac sign:
  <input  [formControl]="zodiacSignControl"/>
  <div>
    <button (click)="apply()">apply</button>
    <button (click)="cancel()">cancel</button>
  </div>
 
</div>

<div *ngIf="!editMode" (click)="onClick()">
name:
<input disabled [formControl]="showNameControl"/>
zodiac sign:
<input disabled [formControl]="showZodiacSignControl"/>
</div>

3. 寫邏輯

app.component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  editMode = false;
  showNameControl = new FormControl('Tim');
  showZodiacSignControl = new FormControl('Lion');
  nameControl = new FormControl(this.showNameControl.value);
  zodiacSignControl = new FormControl(this.showZodiacSignControl.value);

  apply() {
    this.editMode = false;
    this.showNameControl.setValue(this.nameControl.value);
    this.showZodiacSignControl.setValue(this.zodiacSignControl.value);
  }

  cancel() {
    this.nameControl.setValue(this.showNameControl.value);
    this.zodiacSignControl.setValue(this.showZodiacSignControl.value);
  }

  onClick() {
    this.editMode = true;
  }
}

常見錯(cuò)誤

1. can't bind to 'ngModel' since it isn't a known property of 'input' or can't bind to 'formControl' since it isn't a known property of 'input'

• 可能忘記在app.module.ts的importsarray中加入相應(yīng)的module

repo: https://github.com/LiuKaixinHappy/angular-form-demo

好的angular form博客：

• https://blog.nrwl.io/angular-forms-in-depth-ecb7c58166b5
• https://blog.angularindepth.com/never-again-be-confused-when-implementing-controlvalueaccessor-in-angular-forms-93b9eee9ee83