微信公眾號(hào)推廣的好處,沈陽優(yōu)化網(wǎng)站公司,廣西網(wǎng)站建設(shè)開發(fā)外包,深圳做網(wǎng)站google推廣最近在做一個(gè)用戶管理模塊#xff0c;需要在表格中點(diǎn)擊編輯按鈕彈出表單彈窗來修改數(shù)據(jù)。剛開始用 d-modal 組件直接寫#xff0c;結(jié)果各種問題#xff0c;后來發(fā)現(xiàn)官方推薦用 DialogService#xff0c;這才算解決了。記錄一下踩坑過程。前言 彈窗表單是后臺(tái)管…最近在做一個(gè)用戶管理模塊需要在表格中點(diǎn)擊編輯按鈕彈出表單彈窗來修改數(shù)據(jù)。剛開始用d-modal組件直接寫結(jié)果各種問題后來發(fā)現(xiàn)官方推薦用DialogService這才算解決了。記錄一下踩坑過程。前言彈窗表單是后臺(tái)管理系統(tǒng)里最常見的交互模式了。用戶列表頁面點(diǎn)擊編輯按鈕彈出一個(gè)表單彈窗修改完數(shù)據(jù)保存更新列表。聽起來簡單但實(shí)際做起來還是有不少細(xì)節(jié)要注意的。我一開始想當(dāng)然地直接用d-modal組件結(jié)果發(fā)現(xiàn)控制顯示隱藏、數(shù)據(jù)回填、表單驗(yàn)證這些地方都挺麻煩的。后來看了官方文檔發(fā)現(xiàn)用DialogService動(dòng)態(tài)創(chuàng)建彈窗會(huì)更簡單。這篇文章就記錄一下怎么用DialogService實(shí)現(xiàn)彈窗表單聯(lián)動(dòng)。一、DialogService 的正確打開方式DevUI 提供了兩種彈窗使用方式一種是直接用d-modal組件另一種是用DialogService動(dòng)態(tài)創(chuàng)建。對(duì)于表單彈窗這種場(chǎng)景官方推薦用DialogService。首先需要在app.config.ts中提供DialogService和它的依賴import{ApplicationConfig,provideZoneChangeDetection}fromangular/core;import{provideRouter}fromangular/router;import{provideAnimations}fromangular/platform-browser/animations;import{DialogService}fromng-devui/modal;import{OverlayContainerRef}fromng-devui/overlay-container;import{DevConfigService}fromng-devui/utils;import{DocumentRef}fromng-devui/window-ref;exportconstappConfig:ApplicationConfig{providers:[provideZoneChangeDetection({eventCoalescing:true}),provideRouter(routes),provideAnimations(),DialogService,OverlayContainerRef,DevConfigService,DocumentRef,],};這里有個(gè)坑DialogService依賴OverlayContainerRef而OverlayContainerRef又依賴DocumentRef這些都需要手動(dòng)提供。如果漏了哪個(gè)運(yùn)行時(shí)會(huì)報(bào)NullInjectorError。二、創(chuàng)建表單組件表單組件不需要包含d-modal標(biāo)簽只需要表單內(nèi)容。DialogService會(huì)自動(dòng)幫你套上彈窗的外殼。// user-edit-modal.component.tsimport{Component,OnInit,Input}fromangular/core;import{FormBuilder,FormGroup,Validators,ReactiveFormsModule}fromangular/forms;import{CommonModule}fromangular/common;import{FormModule}fromng-devui/form;import{TextInputModule}fromng-devui/text-input;import{SelectModule}fromng-devui/select;import{RadioModule}fromng-devui/radio;Component({selector:app-user-edit-modal,standalone:true,imports:[CommonModule,ReactiveFormsModule,FormModule,TextInputModule,SelectModule,RadioModule,],templateUrl:./user-edit-modal.component.html,styleUrl:./user-edit-modal.component.scss,})exportclassUserEditModalComponentimplementsOnInit{Input()data:any;// DialogService 會(huì)通過 data 傳遞數(shù)據(jù)userForm!:FormGroup;constructor(privatefb:FormBuilder){}ngOnInit():void{this.initForm();// 從 data 中獲取數(shù)據(jù)if(this.data?.userData){this.loadUserData(this.data.userData);}}initForm():void{this.userFormthis.fb.group({name:[,[Validators.required,Validators.minLength(2)]],age:[null,[Validators.required,Validators.min(18)]],gender:[,Validators.required],email:[,[Validators.required,Validators.email]],department:[,Validators.required],});// 監(jiān)聽表單變化更新按鈕狀態(tài)this.userForm.valueChanges.subscribe((){if(this.data?.canConfirm){this.data.canConfirm(this.userForm.valid);}});}loadUserData(data:any):void{// 數(shù)據(jù)格式轉(zhuǎn)換constformData{name:data.name||,age:data.age||null,gender:data.gender男?male:female,email:data.email||,department:this.getDepartmentKey(data.department),};this.userForm.patchValue(formData);}onSubmit():void{if(this.userForm.valid){constsubmitData{...this.userForm.value,gender:this.userForm.value.gendermale?男:女,department:this.departmentOptions.find(dd.keythis.userForm.value.department)?.value||,};// 調(diào)用回調(diào)函數(shù)if(this.data?.onSave){this.data.onSave(submitData);}}else{// 標(biāo)記所有字段為 touched顯示驗(yàn)證錯(cuò)誤Object.keys(this.userForm.controls).forEach(key{this.userForm.get(key)?.markAsTouched();});}}}關(guān)鍵點(diǎn)組件通過Input() data接收DialogService傳遞的數(shù)據(jù)表單驗(yàn)證通過后調(diào)用data.onSave回調(diào)函數(shù)表單變化時(shí)通過data.canConfirm更新彈窗按鈕的禁用狀態(tài)三、在表格組件中使用 DialogService表格組件中注入DialogService點(diǎn)擊編輯按鈕時(shí)調(diào)用open方法// table.component.tsimport{Component}fromangular/core;import{DialogService}fromng-devui/modal;import{UserEditModalComponent}from../user-edit-modal/user-edit-modal.component;Component({selector:app-table,standalone:true,imports:[DataTableModule,PaginationModule,ButtonModule,CommonModule],templateUrl:./table.component.html,})exportclassTableComponent{constructor(privatedialogService:DialogService){}// 打開編輯彈窗openEditModal(user:any):void{constresultsthis.dialogService.open({id:user-edit-dialog,width:600px,title:編輯用戶,content:UserEditModalComponent,backdropCloseable:true,data:{userData:user,onSave:(userData:any){// 更新表格數(shù)據(jù)this.updateUserData(user.id,userData);results.modalInstance.hide();},canConfirm:(value:boolean){// 更新保存按鈕的禁用狀態(tài)results.modalInstance.updateButtonOptions([{disabled:!value}]);}},buttons:[{cssClass:primary,text:保存,disabled:true,handler:($event:Event){if(results.modalContentInstance?.onSubmit){results.modalContentInstance.onSubmit();}},},{cssClass:common,text:取消,handler:(){results.modalInstance.hide();},},],});}}dialogService.open()返回的對(duì)象包含modalInstance彈窗實(shí)例可以調(diào)用hide()關(guān)閉彈窗modalContentInstance表單組件實(shí)例可以調(diào)用組件的方法四、樣式優(yōu)化彈窗內(nèi)容區(qū)域的樣式需要注意要確保背景透明和彈窗背景一致.modal-content { padding: 0; background: transparent !important; form { background: transparent !important; d-form-item { margin-bottom: 20px; display: flex; align-items: flex-start; background: transparent !important; d-form-label { margin-right: 12px; margin-top: 8px; min-width: 60px; flex-shrink: 0; } d-form-control { flex: 1; max-width: 200px; } } } } // 覆蓋 DevUI 默認(rèn)樣式 :host ::ng-deep { form[dForm] { background: transparent !important; border: none !important; } }用!important和::ng-deep是為了覆蓋 DevUI 的默認(rèn)樣式。如果不加可能會(huì)看到表單區(qū)域有背景色或邊框和彈窗不協(xié)調(diào)。五、常見問題1. 按鈕狀態(tài)更新保存按鈕默認(rèn)是禁用的只有當(dāng)表單驗(yàn)證通過時(shí)才啟用。這需要在表單的valueChanges中調(diào)用canConfirmthis.userForm.valueChanges.subscribe((){if(this.data?.canConfirm){this.data.canConfirm(this.userForm.valid);}});2. 數(shù)據(jù)格式轉(zhuǎn)換表格數(shù)據(jù)和表單數(shù)據(jù)格式可能不一樣。比如表格里性別是男/“女”表單里是male/“female”。需要在loadUserData和onSubmit中做轉(zhuǎn)換。3. 表單驗(yàn)證表單提交時(shí)如果驗(yàn)證不通過需要標(biāo)記所有字段為touched這樣錯(cuò)誤信息才會(huì)顯示出來?？偨Y(jié)用DialogService實(shí)現(xiàn)彈窗表單比直接用d-modal組件要簡單很多。不需要手動(dòng)管理顯示隱藏不需要ViewChild和生命周期鉤子代碼更清晰。唯一需要注意的是要提供所有依賴的服務(wù)以及處理好數(shù)據(jù)格式轉(zhuǎn)換。如果遇到問題先檢查app.config.ts里的服務(wù)提供者是否齊全然后看看數(shù)據(jù)格式轉(zhuǎn)換是否正確。基本上這兩點(diǎn)解決了功能就能正常工作了。參考資源DevUI官網(wǎng)https://devui.design/home