在angular中，對表單進行操作的方式有兩種，第一種為前面我們用過的較簡單的[模板驅動表單](https://www.angular.cn/guide/forms)，第二種為本小節要使用更加面向對象的[響應式表單](https://www.angular.cn/guide/reactive-forms)。 ## 引入依賴 響應式表單位于[ReactiveFormsModule](https://www.angular.cn/api/forms/ReactiveFormsModule)中。 klass/add/add.component.spec.ts ``` import {FormsModule, ReactiveFormsModule} from '@angular/forms'; ① describe('Klass/AddComponent', () => { let component: AddComponent; let fixture: ComponentFixture<AddComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [AddComponent], imports: [ FormsModule, ② ReactiveFormsModule ? ] }) .compileComponents(); })); ``` * ② ngSubmit位于FormsModule中 * ? 我們即將使用的響應式表單位于ReactiveFormsModule中 ## C層初始化 在響應式表中，每個表單項都是一個對象，使用如下方法進行初始化： klass/add/add.component.ts ① ``` import {FormControl} from '@angular/forms'; export class AddComponent implements OnInit { name: FormControl; ② teacherId: FormControl; ② constructor() { } ngOnInit() { this.name = new FormControl(''); ? this.teacherId = new FormControl(); ? } onSubmit(): void { } } ``` * ② 變量類型由普通的變量，變更為FormControl對象 * ? 實例化 ## 綁定到V層 klass/add/add.component.html ``` <h3>新增班級</h3> <form (ngSubmit)="onSubmit()"> <label for="name">名稱：<input id="name" type="text" [formControl]?="name"/></label> <label for="teacherId">教師ID：<input type="number" id="teacherId" [formControl]?="teacherId"></label> <button>保存</button> </form> ``` * ? 使用`[formControl]`來指定該表單項對應的響應式表單對象。 ## 單元測試 ### 測序C層綁定到V層 klass/add/add.component.spec.ts ``` /** * 測試C層向V層數據綁定 * 在C層中使用setValue方法對表單項賦值 * 重新渲染V層后，使用CSS選擇器來獲取元素 * 獲取元素的值并斷言 */ fit('測試C層向V層數據綁定', () => { expect(component).toBeTruthy(); component.name.setValue('test'); component.teacherId.setValue(1); fixture.detectChanges(); fixture.whenStable().then(() => { const debugElement: DebugElement = fixture.debugElement; const nameElement = debugElement.query(By.css('#name')); ① const nameInput: HTMLInputElement = nameElement.nativeElement; expect(nameInput.value).toBe('test'); const teacherIdElement = debugElement.query(By.css('#teacherId')); ① const teacherIdInput: HTMLInputElement = teacherIdElement.nativeElement; expect(teacherIdInput.value).toBe('1'); }); }); ``` * ① 使用`#`來選擇`id`元素。  ### 測試V層綁定到C層 將前面的測試方法名由`fit`修改為`it`后，新建如下測試方法： klass/add/add.component.spec.ts ``` /** * 測試V層向C層綁定 * 獲取V層的元素，并設置元素的值 * 斷言在C層中獲取到了元素的值 */ fit('測試V層向C層綁定', () => { expect(component).toBeTruthy(); fixture.whenStable().then(() => { const debugElement: DebugElement = fixture.debugElement; const nameElement = debugElement.query(By.css('#name')); const nameInput: HTMLInputElement = nameElement.nativeElement; nameInput.value = 'test2'; nameInput.dispatchEvent(new Event('input')); expect(component.name.value).toBe('test2'); const teacherIdElement = debugElement.query(By.css('#teacherId')); const teacherIdInput: HTMLInputElement = teacherIdElement.nativeElement; teacherIdInput.value = '2'; teacherIdInput.dispatchEvent(new Event('input')); expect(component.teacherId.value).toBe(2); }); }); ```  # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.3.2](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.3.2) | - | | 響應式表單 | [https://www.angular.cn/guide/reactive-forms](https://www.angular.cn/guide/reactive-forms) | 20 |