久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

班級(jí)選擇組件完成后，我們繼續(xù)完成學(xué)生新增組件：  ## 初始化 在`src/app`中新建student模塊，然后進(jìn)入該模塊新建新增學(xué)生組件： ```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) ``` 然后進(jìn)入新建的`stduent`文件夾，并創(chuàng)建新增學(xué)生組件： ```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">學(xué)號(hào)</label> <div class="col-sm-10"> <input type="text" class="form-control" formControlName="number"> <small class="text-danger" *ngIf="formGroup.get('number').invalid"> 學(xué)號(hào)不能為空 </small> </div> </div> <div class="mb-3 row"> <label class="col-sm-2 col-form-label">手機(jī)號(hào)</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">班級(jí)</label> <div class="col-sm-10"> <app-clazz-select formControlName="clazzId"></app-clazz-select> <small class="text-danger" *ngIf="formGroup.get('clazzId').invalid"> 必須選擇班級(jí) </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> ``` 對(duì)應(yīng)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'); } } ``` 對(duì)新在模塊中引入響應(yīng)式表單： ```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 { ``` ## 單元測(cè)試 在單元測(cè)試中同樣引入響應(yīng)式表單： ```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`，啟用學(xué)生添加組件的單元測(cè)試：  提示上述錯(cuò)誤。在繼續(xù)修改上述錯(cuò)誤前，我們修正下測(cè)試的描述，以期以后在發(fā)生錯(cuò)誤時(shí)快速定位到錯(cuò)誤的文件位置： ```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>; ``` 好了，本節(jié)就到這里。下節(jié)中我們共同來修正這個(gè)單元測(cè)試錯(cuò)誤。 ## 本節(jié)作業(yè) 嘗試按下圖修正本節(jié)最后單元測(cè)試出現(xiàn)的錯(cuò)誤，未修正成功請(qǐng)繼續(xù)學(xué)習(xí)7.2.1小節(jié)。  | 名稱 | 鏈接 | | ---------------- | ------------------------------------------------------------ | | 本節(jié)源碼(含答案) | [https://github.com/mengyunzhi/angular11-guild/archive/step7.2.zip](https://github.com/mengyunzhi/angular11-guild/archive/step7.2.zip) |