教師組件支持`FormControl`后，便可以按以前的設置移除班級編輯組中的`teacherId`緩存轉而使用`FormControl`了。 ## 使用FormControl 來到組件的V層，使用`[formControl]`替換原寫法： ```html +++ b/first-app/src/app/clazz/edit/edit.component.html @@ -12,7 +12,7 @@ <div class="mb-3 row"> <label class="col-sm-2 col-form-label">班主任</label> <div class="col-sm-10"> - <app-klass-select [id]="teacherId" (beChange)="onTeacherChange($event)"></app-klass-select> + <app-klass-select [formControl]="formGroup.get('teacherId')"></app-klass-select> <small class="text-danger" *ngIf="teacherId === undefined"> 必須指定一個班主任 </small> ``` 啟用對應的測試用例后，測試如下：  - 組件初始化時可以選中原班主任 - 選擇某個班主任后點擊保存按扭，控制臺打印了相應的教師ID ### 另一種寫法 在Angular中當把form指定為某個`FormGroup`時，也可以如下指定`FormControl`: ```html +++ b/first-app/src/app/clazz/edit/edit.component.html @@ -12,7 +12,7 @@ <div class="mb-3 row"> <label class="col-sm-2 col-form-label">班主任</label> <div class="col-sm-10"> - <app-klass-select [formControl]="formGroup.get('teacherId')"></app-klass-select> + <app-klass-select formControlName="teacherId"></app-klass-select> <small class="text-danger" *ngIf="teacherId === undefined"> 必須指定一個班主任 </small> ``` 使用`formControlName`的方式更簡潔，在日后會被更多的使用。在此我們再復習一遍兩種使用方式本質上傳值的區別：`[formControl]="xxx"`中的`xxx`對應組件C層中的屬性，而`formControlName="xxx"`中的`xxx`即是普通的字符串。 - `[a]="xxx" `中的`xxx`對應C層中的屬性。 - `(a)="xxx()"`中的`xxx`對應C層中的方法。 - `a="xxx"`中的`xxx`是普通的字符串。 ### 驗證提示 將驗證提示同樣使用`FormControl`的方式： ```html <div class="col-sm-10"> <app-klass-select formControlName="teacherId"></app-klass-select> - <small class="text-danger" *ngIf="teacherId === undefined"> + <small class="text-danger" *ngIf="formGroup.get('teacherId').invalid"> 必須指定一個班主任 </small> </div> ``` 但遺憾的是，我們并沒有辦法通過測試看到這個提示效果。在編程中我們應該規避寫一些永遠都不會用到的代碼，當某些代碼被確認為永遠都不會起效時，則應該將其刪除： ```html <div class="col-sm-10"> <app-klass-select formControlName="teacherId"></app-klass-select> - <small class="text-danger" *ngIf="formGroup.get('teacherId').invalid"> - 必須指定一個班主任 - </small> </div> ``` ## 刪除冗余代碼 V層中的編輯字段全部使用`FormControl`后C層中的`teacherId`便失去了意義，可以刪除了： ```typescript +++ b/first-app/src/app/clazz/edit/edit.component.ts @@ -15,7 +15,7 @@ export class EditComponent implements OnInit { * 班級名稱. */ nameFormControl = new FormControl('', Validators.required); - teacherId: number | undefined; + /** * 表單組，用于存放多個formControl */ @@ -45,14 +45,12 @@ export class EditComponent implements OnInit { .subscribe(clazz => { console.log('接收到了clazz', clazz); this.nameFormControl.patchValue(clazz.name); - this.teacherId = clazz.teacher.id; this.formGroup.get('teacherId')?.setValue(clazz.teacher.id); }, error => console.log(error)); } onTeacherChange($event: number): void { console.log('接收到了選擇的teacherId', $event); - this.teacherId = $event; this.formGroup.get('teacherId')?.setValue($event); } ``` ## TODO 最后，還要為組件尚未完成的功能加入TODO，以防后期自己把這個未完成的功能忘掉，同時在控制臺中打印警告信息，做一下提醒： ```typescript ngOnInit(): void { const id = this.activatedRoute.snapshot.params.id; - // 調用loadById方法，獲取預編輯的班級 + // todo: 調用loadById方法，獲取預編輯的班級 + console.log('ngOnInit方法獲取路由ID及調用loadById尚未測試，請在集成測試中補充代碼'); } ``` ## 本節作業 - 使用`formControlName`屬性改寫班級名稱對應的`input`后測試 | 名稱 | 鏈接 | | --------------- | ------------------------------------------------------------ | | FormControlName | [https://angular.cn/api/forms/FormControlName](https://angular.cn/api/forms/FormControlName) | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.4.6.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.4.6.zip) |