班級選擇組件完成后，我們繼續完成學生新增組件：  ## 初始化 在`src/app`中新建student模塊，然后進入該模塊新建新增學生組件： ```bash panjie@panjies-iMac app % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app panjie@panjies-iMac app % ng g m student CREATE src/app/student/student.module.ts (193 bytes) ``` 然后進入新建的`stduent`文件夾，并創建新增學生組件： ```bash panjie@panjies-iMac app % cd student panjie@panjies-iMac student % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app/student panjie@panjies-iMac student % ng g c add CREATE src/app/student/add/add.component.css (0 bytes) CREATE src/app/student/add/add.component.html (18 bytes) CREATE src/app/student/add/add.component.spec.ts (605 bytes) CREATE src/app/student/add/add.component.ts (263 bytes) UPDATE src/app/student/student.module.ts (257 bytes) ``` 然后按原型初始化V層文件： ```html <form class="container-sm" (ngSubmit)="onSubmit()" [formGroup]="formGroup"> <div class="mb-3 row"> <label class="col-sm-2 col-form-label">名稱</label> <div class="col-sm-10"> <input type="text" class="form-control" formControlName="name"> <small class="text-danger" *ngIf="formGroup.get('name').invalid"> 名稱不能為空 </small> </div> </div> <div class="mb-3 row"> <label class="col-sm-2 col-form-label">學號</label> <div class="col-sm-10"> <input type="text" class="form-control" formControlName="number"> <small class="text-danger" *ngIf="formGroup.get('number').invalid"> 學號不能為空 </small> </div> </div> <div class="mb-3 row"> <label class="col-sm-2 col-form-label">手機號</label> <div class="col-sm-10"> <input type="text" class="form-control" formControlName="phone"> </div> </div> <div class="mb-3 row"> <label class="col-sm-2 col-form-label">郵箱</label> <div class="col-sm-10"> <input type="text" class="form-control" formControlName="email"> </div> </div> <div class="mb-3 row"> <label class="col-sm-2 col-form-label">班級</label> <div class="col-sm-10"> <app-clazz-select formControlName="clazzId"></app-clazz-select> <small class="text-danger" *ngIf="formGroup.get('clazzId').invalid"> 必須選擇班級 </small> </div> </div> <div class="mb-3 row"> <div class="col-sm-10 offset-2"> <button class="btn btn-primary" [disabled]="formGroup.invalid">保存 </button> </div> </div> </form> ``` 對應C層如下： ```typescript import {Component, OnInit} from '@angular/core'; import {FormControl, FormGroup} from '@angular/forms'; @Component({ selector: 'app-add', templateUrl: './add.component.html', styleUrls: ['./add.component.css'] }) export class AddComponent implements OnInit { formGroup = new FormGroup({ name: new FormControl(), number: new FormControl(), phone: new FormControl(), email: new FormControl(), clazzId: new FormControl() }); constructor() { } ngOnInit(): void { } onSubmit(): void { console.log('submit'); } } ``` 對新在模塊中引入響應式表單： ```typescript +++ b/first-app/src/app/student/student.module.ts @@ -1,12 +1,14 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {AddComponent} from './add/add.component'; +import {ReactiveFormsModule} from '@angular/forms'; @NgModule({ declarations: [AddComponent], imports: [ - CommonModule + CommonModule, + ReactiveFormsModule ] }) export class StudentModule { ``` ## 單元測試 在單元測試中同樣引入響應式表單： ```typescript +++ b/first-app/src/app/student/add/add.component.spec.ts @@ -1,6 +1,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {AddComponent} from './add.component'; +import {ReactiveFormsModule} from '@angular/forms'; describe('AddComponent', () => { let component: AddComponent; @@ -8,7 +9,10 @@ describe('AddComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [AddComponent] + declarations: [AddComponent], + imports: [ + ReactiveFormsModule + ] }) .compileComponents(); }); ``` 最后使用`ng t`加入`fit`，啟用學生添加組件的單元測試：  提示上述錯誤。在繼續修改上述錯誤前，我們修正下測試的描述，以期以后在發生錯誤時快速定位到錯誤的文件位置： ```typescript +++ b/first-app/src/app/student/add/add.component.spec.ts @@ -3,7 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {AddComponent} from './add.component'; import {ReactiveFormsModule} from '@angular/forms'; -describe('AddComponent', () => { +describe('student -> AddComponent', () => { let component: AddComponent; let fixture: ComponentFixture<AddComponent>; ``` 好了，本節就到這里。下節中我們共同來修正這個單元測試錯誤。 ## 本節作業 嘗試按下圖修正本節最后單元測試出現的錯誤，未修正成功請繼續學習7.2.1小節。  | 名稱 | 鏈接 | | ---------------- | ------------------------------------------------------------ | | 本節源碼(含答案) | [https://github.com/mengyunzhi/angular11-guild/archive/step7.2.zip](https://github.com/mengyunzhi/angular11-guild/archive/step7.2.zip) |