參考前面章節實現班級列表組件及班級新增組件的方法，先使用終端進行app/klass路徑，然后執行`ng g c edit`命令來創建班級編輯組件。 ``` panjiedeMac-Pro:klass panjie$ ng g c edit CREATE src/app/klass/edit/edit.component.sass (0 bytes) CREATE src/app/klass/edit/edit.component.html (19 bytes) CREATE src/app/klass/edit/edit.component.spec.ts (614 bytes) CREATE src/app/klass/edit/edit.component.ts (262 bytes) UPDATE src/app/klass/klass.module.ts (760 bytes) ``` 接著我們找到klass/add/add.component.spec.ts， 修正單元測試名稱以及將`it`方法暫時修改為`fit`方法，并在終端中執行`ng test`命令來啟動單元測試。 klass/add/add.component.spec.ts ``` import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { EditComponent } from './edit.component'; describe('klass EditComponent', () => { let component: EditComponent; let fixture: ComponentFixture<EditComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ EditComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(EditComponent); component = fixture.componentInstance; fixture.detectChanges(); }); fit('should create', () => { expect(component).toBeTruthy(); }); }); ```  在上個小節中，我們直接定義了兩個FormControl并直接綁定到了V層中。但V層中的表單中的字段較多時，就使用C層中有大量的表單變量，這與面象對象中的“封裝性”不相符。在angular中，我們可以將FormControl封裝到FormGroup中，然后將FormGroup綁定到form。這樣一來，CV層便建立起了如下關系:  ## C層初始化 FormGroup的使用也非常的簡單： klass/edit/edit.component.ts ``` import {Component, OnInit} from '@angular/core'; import {FormControl, FormGroup} from '@angular/forms'; @Component({ selector: 'app-edit', templateUrl: './edit.component.html', styleUrls: ['./edit.component.sass'] }) export class EditComponent implements OnInit { formGroup: FormGroup; ? constructor() { } ngOnInit() { this.formGroup = new FormGroup({ ? name: new FormControl(), ? teacherId: new FormControl() ? }); } } ``` * ? 聲明變量 * ? 初始化，構造函數中接收的類型為`{}` * ? 該對象中有兩個屬性，分別為name和teacherId，分別使用FormControl進行初始化，在初始化的過程中可以對該項賦值。 ## V層初始化 klass/edit/edit.component.spec.ts ``` <h3>編輯班級</h3> <form (ngSubmit)="onSubmit()" [formGroup]="formGroup"? > <label for="name">名稱：<input id="name" type="text" formControlName="name"?/></label> <label for="teacherId">教師ID：<input type="number" id="teacherId" formControlName="teacherId"?></label> <button>更新</button> </form> ``` * ? 使用`[formGroup]`將表單綁定到C層的`formGroup`變量 * ? 使用`formControlName`來指定該input對應的formGroup中的屬性 ### 測試 FormGroup同樣屬于ReactiveFormsModule，則測試文件如下： klass/edit/edit.component.spec.ts ```js beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [EditComponent], imports: [ ReactiveFormsModule ① ] }) .compileComponents(); })); ```  ## 設置FormGroup中的值 除在初始化的過程中過FormGroup中的項賦值以后，我們還可以調用FormGroup的setValue方法來進行賦值操作。 比如當前我們對組件進行如下的初始化操作： klass/edit/edit.component.ts ``` export class EditComponent implements OnInit { formGroup: FormGroup; private url: string; ① constructor(private route: ActivatedRoute, private router: Router, private httpClient: HttpClient) { } private getUrl(): string { ② return this.url; } /** * 加載要編輯的班級數據 */ loadData(): void { this.httpClient.get(this.getUrl()) .subscribe((klass: Klass) => { this.formGroup.setValue({name: klass.name, teacherId: klass.teacher.id}) ?; }, () => { console.error(`${this.getUrl()}請求發生錯誤`); }); } ngOnInit() { this.formGroup = new FormGroup({ name: new FormControl(), teacherId: new FormControl() }); this.route.params.subscribe((param: { id: number }) => { this.setUrlById(param.id); this.loadData(); }); } /** * 用戶提交時執行的更新操作 */ onSubmit(): void { } /** * 設置URL請求信息 * @param {number} id 班級ID */ private setUrlById(id: number): void { ③ this.url = `http://localhost:8080/Klass/${id}`; } } ``` * ? 調用FormGroup的`setValue({})`來進行賦值操作。 ## 獲取FormGroup的值 在數據提交時，需要獲取FormGroup的值，此時我們調用其`value`屬性。 klass/edit/edit.component.ts ```ts /** * 用戶提交時執行的更新操作 */ onSubmit(): void { const data = { name: this.formGroup.value.name, ? teacher: {id: this.formGroup.value.teacherId} ? }; this.httpClient.put(this.getUrl(), data) .subscribe(() => { this.router.navigateByUrl('', {relativeTo: this.route}); }, () => { console.error(`在${this.getUrl()}上的PUT請求發生錯誤`); }); } ``` * ? 調用FormGroup的value屬性獲取當前表單的值 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.4.1](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.4.1) | - | | 把表單控件分組 | [https://www.angular.cn/guide/reactive-forms#grouping-form-controls](https://www.angular.cn/guide/reactive-forms#grouping-form-controls) | 10 | | FormControlName | [https://www.angular.cn/api/forms/FormControlName](https://www.angular.cn/api/forms/FormControlName) | - | | FormGroup | [https://www.angular.cn/api/forms/FormGroup](https://www.angular.cn/api/forms/FormGroup) | - |