网站建设哪里有学丰宁县有做网站的吗

网站建设哪里有学,丰宁县有做网站的吗,微信网站建设app公司,工商网最近在做一个用户管理模块#xff0c;需要在表格中点击编辑按钮弹出表单弹窗来修改数据。刚开始用 d-modal 组件直接写#xff0c;结果各种问题#xff0c;后来发现官方推荐用 DialogService#xff0c;这才算解决了。记录一下踩坑过程。前言 弹窗表单是后台管…最近在做一个用户管理模块需要在表格中点击编辑按钮弹出表单弹窗来修改数据。刚开始用d-modal组件直接写结果各种问题后来发现官方推荐用DialogService这才算解决了。记录一下踩坑过程。前言弹窗表单是后台管理系统里最常见的交互模式了。用户列表页面点击编辑按钮弹出一个表单弹窗修改完数据保存更新列表。听起来简单但实际做起来还是有不少细节要注意的。我一开始想当然地直接用d-modal组件结果发现控制显示隐藏、数据回填、表单验证这些地方都挺麻烦的。后来看了官方文档发现用DialogService动态创建弹窗会更简单。这篇文章就记录一下怎么用DialogService实现弹窗表单联动。一、DialogService 的正确打开方式DevUI 提供了两种弹窗使用方式一种是直接用d-modal组件另一种是用DialogService动态创建。对于表单弹窗这种场景官方推荐用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,],};这里有个坑DialogService依赖OverlayContainerRef而OverlayContainerRef又依赖DocumentRef这些都需要手动提供。如果漏了哪个运行时会报NullInjectorError。二、创建表单组件表单组件不需要包含d-modal标签只需要表单内容。DialogService会自动帮你套上弹窗的外壳。// 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 会通过 data 传递数据userForm!:FormGroup;constructor(privatefb:FormBuilder){}ngOnInit():void{this.initForm();// 从 data 中获取数据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],});// 监听表单变化更新按钮状态this.userForm.valueChanges.subscribe((){if(this.data?.canConfirm){this.data.canConfirm(this.userForm.valid);}});}loadUserData(data:any):void{// 数据格式转换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||,};// 调用回调函数if(this.data?.onSave){this.data.onSave(submitData);}}else{// 标记所有字段为 touched显示验证错误Object.keys(this.userForm.controls).forEach(key{this.userForm.get(key)?.markAsTouched();});}}}关键点组件通过Input() data接收DialogService传递的数据表单验证通过后调用data.onSave回调函数表单变化时通过data.canConfirm更新弹窗按钮的禁用状态三、在表格组件中使用 DialogService表格组件中注入DialogService点击编辑按钮时调用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){// 更新表格数据this.updateUserData(user.id,userData);results.modalInstance.hide();},canConfirm:(value:boolean){// 更新保存按钮的禁用状态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()返回的对象包含modalInstance弹窗实例可以调用hide()关闭弹窗modalContentInstance表单组件实例可以调用组件的方法四、样式优化弹窗内容区域的样式需要注意要确保背景透明和弹窗背景一致.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 默认样式 :host ::ng-deep { form[dForm] { background: transparent !important; border: none !important; } }用!important和::ng-deep是为了覆盖 DevUI 的默认样式。如果不加可能会看到表单区域有背景色或边框和弹窗不协调。五、常见问题1. 按钮状态更新保存按钮默认是禁用的只有当表单验证通过时才启用。这需要在表单的valueChanges中调用canConfirmthis.userForm.valueChanges.subscribe((){if(this.data?.canConfirm){this.data.canConfirm(this.userForm.valid);}});2. 数据格式转换表格数据和表单数据格式可能不一样。比如表格里性别是男/“女”表单里是male/“female”。需要在loadUserData和onSubmit中做转换。3. 表单验证表单提交时如果验证不通过需要标记所有字段为touched这样错误信息才会显示出来。总结用DialogService实现弹窗表单比直接用d-modal组件要简单很多。不需要手动管理显示隐藏不需要ViewChild和生命周期钩子代码更清晰。唯一需要注意的是要提供所有依赖的服务以及处理好数据格式转换。如果遇到问题先检查app.config.ts里的服务提供者是否齐全然后看看数据格式转换是否正确。基本上这两点解决了功能就能正常工作了。参考资源DevUI官网https://devui.design/home