华为云的DevUIForm组件实战：个人信息编辑表单完整实现-育师

最近在做项目时用到了华为云的 DevUI 组件库，其中 Form 表单组件用得比较多。踩了不少坑，也总结了一些经验，分享给大家。

前言

表单是 Web 开发中最常见的交互组件，几乎每个后台管理系统都离不开它。我在使用 DevUI 的 Form 组件时，发现它的文档虽然全面，但实际项目中会遇到一些细节问题。这篇文章就是基于一个真实的个人信息编辑表单案例，讲讲怎么用 DevUI Form 组件，以及一些容易踩的坑。

一、项目环境准备

首先，确保你的项目已经安装了 ng-devui。如果还没装，可以看我上一篇的文章：
华为云 DevUI初体验：如何快速入门项目搭建

二、组件导入和基础结构

DevUI 的 Form 组件是基于 Angular Reactive Forms 的，所以需要导入ReactiveFormsModule。看下我的组件导入：

import{Component,OnInit}from'@angular/core';import{FormBuilder,FormGroup,Validators,ReactiveFormsModule}from'@angular/forms';import{CommonModule}from'@angular/common';import{FormModule}from'ng-devui/form';import{TextInputModule}from'ng-devui/text-input';import{SelectModule}from'ng-devui/select';import{DatepickerModule}from'ng-devui/datepicker';import{RadioModule}from'ng-devui/radio';import{TextareaModule}from'ng-devui/textarea';import{ButtonModule}from'ng-devui/button';@Component({selector:'app-form',standalone:true,imports:[CommonModule,ReactiveFormsModule,FormModule,TextInputModule,SelectModule,DatepickerModule,RadioModule,TextareaModule,ButtonModule],templateUrl:'./form.component.html',styleUrl:'./form.component.scss'})exportclassFormComponentimplementsOnInit{// ...}

注意几个点：

FormModule提供了dForm、d-form-item、d-form-control等核心组件
各种输入组件需要单独导入对应的模块
如果用的是 Angular 18 的 standalone 模式，记得把所有用到的模块都加到imports数组里

三、表单数据结构设计

我的表单包含基本信息、联系方式、工作信息和其他信息四个部分，总共 10 个字段。数据结构这样设计：

userForm!:FormGroup;// 性别选项genderOptions=[{value:'male',label:'男'},{value:'female',label:'女'}];// 部门选项（注意：Select 组件需要 key-value 格式）departmentOptions=[{key:'tech',value:'技术部'},{key:'product',value:'产品部'},{key:'design',value:'设计部'},{key:'operation',value:'运营部'},{key:'hr',value:'人事部'}];// 城市选项cityOptions=[{key:'beijing',value:'北京'},{key:'shanghai',value:'上海'},{key:'guangzhou',value:'广州'},{key:'shenzhen',value:'深圳'},{key:'hangzhou',value:'杭州'}];

这里有个坑：d-select组件的options属性需要的是{ key, value }格式，不是{ id, name }或者{ value, label }。我一开始用错了格式，下拉框显示不出来，调试了半天才发现。

四、表单初始化和验证

表单初始化用FormBuilder来创建，验证规则直接在定义时加上：

initForm():void{this.userForm=this.fb.group({name:['',[Validators.required,Validators.minLength(2),Validators.maxLength(20)]],age:[null,[Validators.required,Validators.min(18),Validators.max(100)]],gender:['',Validators.required],birthday:[null,Validators.required],email:['',[Validators.required,Validators.email]],phone:['',[Validators.required,Validators.pattern(/^1[3-9]\d{9}$/)]],department:['',Validators.required],city:['',Validators.required],address:['',[Validators.required,Validators.maxLength(200)]],description:['',Validators.maxLength(500)]});}

手机号验证用了正则表达式/^1[3-9]\d{9}$/，只允许 1 开头、第二位是 3-9 的 11 位数字。年龄限制在 18-100 岁之间，这个根据业务需求调整。

五、模板结构

HTML 模板的结构比较清晰，用dForm指令包裹整个表单，每个字段用d-form-item包裹：

<formdForm[formGroup]="userForm"(ngSubmit)="onSubmit()"><divclass="form-section"><h3class="section-title">基本信息</h3><divclass="form-row"><d-form-itemclass="form-item"[dHasFeedback]="true"><d-form-label>姓名<spanclass="required-mark">*</span></d-form-label><d-form-control><inputdTextInputformControlName="name"placeholder="请输入姓名"/><divclass="error-message"*ngIf="isFieldInvalid('name')">{{ getFieldError("name") }}</div></d-form-control></d-form-item><!-- 其他字段... --></div></div></form>

几个注意点：

dForm指令必须加在<form>标签上
[dHasFeedback]="true"用来显示验证反馈，注意是属性绑定，不能写成dHasFeedback="true"
错误提示用*ngIf控制显示，只在字段被触摸过且有错误时显示

六、常见问题处理

1. Textarea 组件的使用

d-textarea其实是个指令，不是组件。应该这样用：

<!-- 错误写法 --><d-textarea[rows]="4"></d-textarea><!-- 正确写法 --><textareadTextarea[rows]="4"></textarea>

我一开始写成了组件形式，编译报错说找不到rows属性，后来查文档才发现是用法不对。

2. Select 组件的选项格式

d-select的options属性需要特定格式：

// 正确格式departmentOptions=[{key:'tech',value:'技术部'}];// 错误格式（这样不会显示）departmentOptions=[{id:'tech',name:'技术部'}];

3. 表单验证错误提示

错误提示需要自己实现，DevUI 不会自动显示。我的做法是写两个辅助方法：

// 检查字段是否有错误isFieldInvalid(fieldName:string):boolean{constcontrol=this.userForm.get(fieldName);return!!(control&&control.invalid&&control.touched);}// 获取字段错误信息getFieldError(fieldName:string):string{constcontrol=this.userForm.get(fieldName);if(control&&control.touched&&control.errors){if(control.errors['required']){return`${this.getFieldLabel(fieldName)}不能为空`;}if(control.errors['email']){return'请输入有效的邮箱地址';}// ... 其他验证规则}return'';}

这样可以在模板里统一处理错误提示，代码更清晰。

七、表单提交和重置

提交时先检查表单是否有效，无效的话把所有字段标记为 touched，这样错误提示就会显示出来：

onSubmit():void{if(this.userForm.valid){console.log('表单数据：',this.userForm.value);// 这里可以调用 API 保存数据alert('保存成功！');}else{// 标记所有字段为 touched，显示验证错误Object.keys(this.userForm.controls).forEach(key=>{this.userForm.get(key)?.markAsTouched();});alert('请检查表单输入是否正确！');}}

重置功能比较简单，调用reset()方法就行。如果需要恢复默认值，可以在重置后重新patchValue。

八、样式优化

表单的样式可以根据项目需求自定义。我用了分组布局，每个分组有标题，字段用两列网格布局，移动端自动变成单列：

.form-section { margin-bottom: 32px; .section-title { font-size: 16px; font-weight: 600; margin: 0 0 20px 0; padding-bottom: 12px; border-bottom: 1px solid #e5e5e5; } } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; @media (max-width: 768px) { grid-template-columns: 1fr; } }