DevUI 是华为云开源的企业级 UI 组件库，它从华为云 DevCloud 研发工具体系孵化而来。其官网的介绍写道：“DevUI Design 可以让开发人员专门专注于应用逻辑的思考，而设计人员专注于用户体验，交互和流程。”

DevUI 基于 Angular 框架，提供了功能强大、场景丰富的多种组件，如 Tree、Table 等。DevUI 倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人进行设计，拒绝哗众取宠、取悦眼球的设计。

DevUI 是一款面向企业中后台产品的开源前端解决方案，源自华为内部多年的业务沉淀，致力于通过组件库和设计体系提升开发效率与体验一致性。

• 核心定位与技术基础：基于 Angular 框架构建，提供开箱即用的 UI 组件库，强调“高效、开放、可信、乐趣”的设计价值观，适用于复杂的企业级应用开发。
• 关键特性：
  • 组件库丰富性：涵盖表格（DTable）、表单、弹窗等高频组件，支持虚拟滚动、行展开、列拖拽等高级功能，优化大数据量场景下的性能。
  • 自定义与扩展能力：允许开发者基于 DevUI 规范创建自定义组件，集成外部库（如 D3.js），并通过依赖注入确保可维护性。
  • 主题定制化：通过 CSS 变量和 SCSS mixin 实现品牌主题与暗黑模式动态切换，支持多品牌系统响应式布局。
• 应用场景与实践：在云控制台、风控系统等大型项目中，通过模块化加载、组件复用（复用率达 85%）及性能监控工具，将页面加载时间优化至 800ms 以内。
• 生态整合与创新：与 AI 工具（如 MateChat）结合实现智能交互，并探索低代码化方向，通过可视化拖拽生成代码骨架。

DevUI 通过完整的开发工具链（如环境搭建指南和教程）降低上手门槛，适合需要快速构建高一致性企业应用的团队。

---

Form 表单

具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

• 表单项 d-form-item：表单项，包含表单Label和具体表单输入组件。
• 表单项 d-form-label：表单项Label，描述该项表单关键字，包括帮助信息、是否必填等功能。
• 控件容器 d-form-control：表单项控件容器，里面容纳不同的表单输入组件。
• 操作区容器 d-form-operation：操作区域容器，用来放置按钮等元素。

<form dForm [layout]="layoutDirection" ngForm>
    <d-form-item>
      <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'This is the plan name.'">Name</d-form-label>
      <d-form-control>
        <div>
          <input dTextInput autocomplete="off" name="userName" />
        </div>
      </d-form-control>
    </d-form-item>
</form>

当前代码存在以下潜在问题：

• ngForm 指令冲突‌：dForm 和 ngForm 同时存在，可能导致表单验证冲突。
• dTextInput 未绑定 ngModel‌：输入框未绑定表单数据，无法实现双向数据绑定。
• dForm 未定义‌：需确认 dForm 是否为自定义指令或组件，否则会报错。

移除 ngForm 指令‌，dForm 已包含表单功能，无需重复使用 ngForm。

<form dForm [layout]="layoutDirection">

绑定 ngModel 实现双向数据绑定‌

<input dTextInput autocomplete="off" name="userName" [(ngModel)]="userName" />

确保 dForm 指令正确导入‌，在组件中导入 FormsModule：

import { FormsModule } from '@angular/forms';
@Component({
  imports: [FormsModule]
})

完整优化代码‌

<form dForm [layout]="layoutDirection">
  <d-form-item>
    <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'This is the plan name.'">Name</d-form-label>
    <d-form-control>
      <div>
        <input dTextInput autocomplete="off" name="userName" [(ngModel)]="userName" />
      </div>
    </d-form-control>
  </d-form-item>
</form>

关键点说明：

• ngModel 必须绑定‌：实现表单数据双向绑定，否则输入框值无法同步到组件属性。
• 指令冲突处理‌：移除 ngForm 避免与 dForm 冲突，确保表单验证逻辑一致。
• 组件依赖‌：确保 dForm 指令来自可信库（如 Delon UI），否则需自定义实现。

---

如何进行表单元素的验证：

验证单个元素，使用内置校验器，配置error message<我们还内置了诸多校验器，可以前往 API 中查看更多信息。

当前DevUI支持的内置校验器有：required、minlength、maxlength、min、max、requiredTrue、email、pattern、whitespace。

• 若需限制用户输入不能全为空格，可使用whitespace内置校验器

• 若需限制用户输入长度，将最大限制设置为实际校验值+1是一个好的办法。

除pattern外，其他内置校验器我们也提供了内置的错误提示信息，在你未自定义提示消息时，我们将使用默认的提示信息。

message配置支持string与object两种形式（支持国际化词条配置，如’zh-cn’，默认将取’default’）。

<section class="demo-section" style="width: 400px">
  <div>
    <input
      dTextInput
      placeholder="Input"
      autocomplete="off"
      name="singleInput"
      maxlength="11"
      [(ngModel)]="singleInput1Data"
      [dValidateRules]="[
        { required: true },
        { whitespace: true },
        { minlength: 3 },
        { maxlength: 10 },
        {
          pattern: isAlphabetPattern,
          message: {
            'zh-cn': '只能包含数字与大小写字符',
            'en-us': 'The value cannot contain characters except uppercase and lowercase letters.',
            default: '只能包含数字与大小写字符'
          }
        }
      ]"
    />
  </div>
</section>

• 表单输入组件‌：使用 dTextInput 指令创建输入框，支持双向数据绑定 [(ngModel)]=“singleInput1Data”。
• 验证规则‌：通过 dValidateRules 数组定义多条验证规则：
  • 必填：{ required: true }
  • 禁止空白：{ whitespace: true }
  • 最小长度3：{ minlength: 3 }
  • 最大长度10：{ maxlength: 10 }
  • 正则匹配：pattern: isAlphabetPattern（需在组件中定义）
• 国际化错误提示‌：支持多语言错误信息，包含中文（zh-cn）、英文（en-us）和默认提示。
• 样式控制‌：通过 style=“width: 400px” 设置输入框宽度。
• 功能特点‌：集成 Angular 表单验证机制，自动处理输入校验和错误提示。

---

验证单个元素，自定义校验器

一个校验器需要一个唯一的id标识，你可显式声明此id，也可声明一个与保留字不冲突的key，此key将被识别为id， 其value作为校验器。

• 自定义校验器，你可以简单返回true | false 来标识当前校验是否通过， 也可以返回string | null，来标识当前是否错误并返回错误消息，适用于动态错误提示。
• 如果是异步校验器，你需要将你的值以Observable对象方式返回。

更多地，DevUI兼容原生angular校验器， 你可将isNgValidator设置为true。

<section class="demo-section" style="width: 400px">
  <div>
    <d-select
      [options]="verifierOptions"
      [(ngModel)]="singleSelectData"
      [multiple]="true"
      [name]="'singleSelect1'"
      [filterKey]="'name'"
      [placeholder]="'Select'"
      [dValidateRules]="{
        validators: [{ maxUser: maxUsers(3), message: 'Do not select more than three administrators.' }],
        asyncValidators: [{ isUserBusy: isUserBusy }]
      }"
    >
    </d-select>
  </div>
</section>

多选下拉组件‌：使用 d-select 指令创建多选下拉框，支持 ngModel 双向数据绑定[(ngModel)]=“singleSelectData”。

• 选项数据绑定‌：通过 [options]=“verifierOptions” 绑定选项列表。
• 验证规则‌：定义同步和异步验证器：
• 同步验证：限制最多选择3个管理员（maxUser: maxUsers(3)）。
• 异步验证：检查用户是否忙碌（isUserBusy）。
• 过滤与占位符‌：支持按 name 属性过滤选项，占位符为 “Select”。
• 样式控制‌：通过 style=“width: 400px” 设置下拉框宽度。

功能特点‌：集成 Angular 表单验证机制，自动处理多选校验和错误提示。

---

<section class="demo-section">
  <d-toast [value]="msgs"></d-toast>
  <div>
    <form dForm ngForm [dValidateRules]="formRules.rule" [layout]="layoutDirection" #userForm="dValidateRules" (dSubmit)="submitForm()">
      <d-form-item>
        <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'Enter a user name you like'">UserName</d-form-label>
        <d-form-control>
          <input
            dTextInput
            autocomplete="off"
            name="username"
            placeholder="Enter a user name"
            [(ngModel)]="formData.userName"
            [dValidateRules]="formRules.usernameRules"
          />
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label [required]="true">Sub User Group</d-form-label>
        <d-form-control>
          <d-child-form-group [userGroupData]="formData.userGroup"></d-child-form-group>
        </d-form-control>
      </d-form-item>
      <d-form-operation>
        <d-button class="mr-element-spacing" [title]="userForm.errorMessage || ''" circled="true" style="margin-right: 8px" dFormSubmit
          >Submit</d-button
        >
        <d-button bsStyle="common" circled="true" dFormReset>Reset</d-button>
      </d-form-operation>
    </form>
  </div>
</section>

import { Component, ViewChild } from '@angular/core';
import { DFormGroupRuleDirective, DValidateRules, FormLayout } from 'ng-devui/form';
import { of } from 'rxjs';
import { delay, map } from 'rxjs/operators';

@Component({
  selector: 'd-form-demo-template-cross-component',
  templateUrl: './validate-cross-component.component.html'
})
export class CrossComponentComponent {
  layoutDirection: FormLayout = FormLayout.Vertical;

  formData = {
    userName: '',
    userGroup: {}
  };

  formRules: {[key: string]: DValidateRules} = {
    rule: { message: 'The form verification failed, please check.' },
    usernameRules: {
      validators: [
        { required: true },
        { minlength: 3 },
        { maxlength: 128 },
        {
          pattern: /^[a-zA-Z0-9]+(\s+[a-zA-Z0-9]+)*$/,
          message: 'The user name cannot contain characters except uppercase and lowercase letters.'
        }
      ],
      asyncValidators: [
        { sameName: this.checkName.bind(this), message: 'Duplicate name.' }
      ]
    }
  };

  existUsernames = ['123', '123456', 'DevUI'];

  @ViewChild('userForm') userFormDir: DFormGroupRuleDirective;

  msgs: Array<Object> = [];

  submitForm() {
    console.log(this.formData);
    // do something for submitting
    if (this.userFormDir.isReady) {
      of(this.formData).pipe(
        map((val) => 'success'),
        delay(500)
      ).subscribe((res) => {
        if (res === 'success') {
          this.showToast('success', 'Success', 'Registration succeeded.');
        }
      });
    } else {
      this.showToast('error', 'Error', 'Check whether all validation items pass.');
    }
  }
  checkName(value) {
    let res = true;
    if (this.existUsernames.indexOf(value) !== -1) {
      res = false;
    }
    return of(res).pipe(delay(500));
  }

  showToast(type: any, title: string, msg: string) {
    this.msgs = [{ severity: type, summary: title, detail: msg }];
  }
}

DevUI是华为云开源的企业级Angular UI组件库，提供丰富的表单组件如Form、Input和Select，支持数据收集、校验和提交功能。其表单验证机制包含内置校验器（required、minlength等）和自定义校验器，支持同步/异步验证及多语言错误提示。通过双向数据绑定和模块化设计，DevUI能有效提升企业级应用开发效率，适用于云控制台等复杂场景。组件库强调"高效、开放"的设计理念，与AI工具结合实现智能交互，并通过主题定制保持品牌一致性。

---

MateChat：https://gitcode.com/DevCloudFE/MateChat
MateChat官网：https://matechat.gitcode.com
DevUI官网：https://devui.design/home