做网站的证书手机网站备案费用

做网站的证书,手机网站备案费用,网站开发的安全性原则,网站建设 江苏最近在做项目时用到了华为云的 DevUI 组件库#xff0c;其中 Form 表单组件用得比较多。踩了不少坑#xff0c;也总结了一些经验#xff0c;分享给大家。 前言 表单是 Web 开发中最常见的交互组件#xff0c;几乎每个后台管理系统都离不开它。我在使用 DevUI 的 Form 组件…最近在做项目时用到了华为云的 DevUI 组件库其中 Form 表单组件用得比较多。踩了不少坑也总结了一些经验分享给大家。前言表单是 Web 开发中最常见的交互组件几乎每个后台管理系统都离不开它。我在使用 DevUI 的 Form 组件时发现它的文档虽然全面但实际项目中会遇到一些细节问题。这篇文章就是基于一个真实的个人信息编辑表单案例讲讲怎么用 DevUI Form 组件以及一些容易踩的坑。一、项目环境准备首先确保你的项目已经安装了 ng-devui。如果还没装可以看我上一篇的文章华为云 DevUI初体验如何快速入门项目搭建二、组件导入和基础结构DevUI 的 Form 组件是基于 Angular Reactive Forms 的所以需要导入ReactiveFormsModule。看下我的组件导入import{Component,OnInit}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{DatepickerModule}fromng-devui/datepicker;import{RadioModule}fromng-devui/radio;import{TextareaModule}fromng-devui/textarea;import{ButtonModule}fromng-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.userFormthis.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()divclassform-sectionh3classsection-title基本信息/h3divclassform-rowd-form-itemclassform-item[dHasFeedback]trued-form-label姓名spanclassrequired-mark*/span/d-form-labeld-form-controlinputdTextInputformControlNamenameplaceholder请输入姓名/divclasserror-message*ngIfisFieldInvalid(name){{ getFieldError(name) }}/div/d-form-control/d-form-item!-- 其他字段... --/div/div/form几个注意点dForm指令必须加在form标签上[dHasFeedback]true用来显示验证反馈注意是属性绑定不能写成dHasFeedbacktrue错误提示用*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{constcontrolthis.userForm.get(fieldName);return!!(controlcontrol.invalidcontrol.touched);}// 获取字段错误信息getFieldError(fieldName:string):string{constcontrolthis.userForm.get(fieldName);if(controlcontrol.touchedcontrol.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; } }总结DevUI 的 Form 组件功能挺完善的但用的时候要注意几个点组件导入要完整特别是 standalone 模式下Select 组件的选项格式要用{ key, value }Textarea 是指令不是组件验证错误提示需要自己实现dHasFeedback要用属性绑定不能用字符串总的来说DevUI Form 组件上手不难但细节上容易踩坑。希望这篇文章能帮到正在使用 DevUI 的开发者。如果遇到其他问题可以看看官方文档或者去社区问问。参考资源DevUI 官方文档Angular Reactive Forms 文档