-
-
Hello, {{ title }}
-Congratulations! Your app is running. 🎉
+ +
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+ 用户名
+
+
+
+
+
+
+
+
+ 用户名
+
+
+
+
+
+
+
+
+ 邮箱
+
+
+
+
+
+
+
+```
+
+### 嵌套表单与数组结构
+
+处理复杂数据结构（如地址列表、工作经历等）时，可以使用 FormArray：
+
+```typescript
+export class NestedFormComponent {
+ userForm: FormGroup;
+
+ constructor(private fb: FormBuilder) {
+ this.userForm = this.fb.group({
+ basicInfo: this.fb.group({
+ firstName: ['', Validators.required],
+ lastName: ['', Validators.required]
+ }),
+ addresses: this.fb.array([
+ this.createAddressGroup()
+ ]),
+ experiences: this.fb.array([])
+ });
+ }
+
+ createAddressGroup(): FormGroup {
+ return this.fb.group({
+ street: ['', Validators.required],
+ city: ['', Validators.required],
+ zipCode: ['', [Validators.required, Validators.pattern(/^\d{5}$/)]]
+ });
+ }
+
+ get addresses(): FormArray {
+ return this.userForm.get('addresses') as FormArray;
+ }
+
+ addAddress() {
+ this.addresses.push(this.createAddressGroup());
+ }
+
+ removeAddress(index: number) {
+ this.addresses.removeAt(index);
+ }
+}
+```
+
+## 表单状态管理与用户体验优化
+
+### 表单状态跟踪与提交控制
+
+合理管理表单状态可以显著提升用户体验：
+
+```typescript
+export class FormStateComponent {
+ isSubmitting = false;
+ submitSuccess = false;
+
+ onSubmit() {
+ // 防止重复提交
+ if (this.isSubmitting || this.userForm.invalid) {
+ return;
+ }
+
+ this.isSubmitting = true;
+ this.submitSuccess = false;
+
+ // 标记所有字段为已触碰，显示验证错误
+ this.markFormGroupTouched(this.userForm);
+
+ this.userService.saveUser(this.userForm.value).subscribe({
+ next: (response) => {
+ this.isSubmitting = false;
+ this.submitSuccess = true;
+ this.showMessage('用户信息保存成功', 'success');
+ },
+ error: (error) => {
+ this.isSubmitting = false;
+ this.showMessage('保存失败: ' + error.message, 'error');
+ }
+ });
+ }
+
+ private markFormGroupTouched(formGroup: FormGroup) {
+ Object.keys(formGroup.controls).forEach(key => {
+ const control = formGroup.get(key);
+ if (control instanceof FormGroup) {
+ this.markFormGroupTouched(control);
+ } else {
+ control.markAsTouched();
+ }
+ });
+ }
+}
+```
+
+### 自定义验证器与错误提示
+
+创建自定义验证器来处理特定业务规则：
+
+```typescript
+import { ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
+
+// 密码强度验证器
+export function passwordStrengthValidator(): ValidatorFn {
+ return (control: AbstractControl): ValidationErrors | null => {
+ const value = control.value;
+ if (!value) {
+ return null;
+ }
+
+ const errors: any = {};
+
+ // 至少8个字符
+ if (value.length < 8) {
+ errors.minLength = true;
+ }
+
+ // 包含大写字母
+ if (!/[A-Z]/.test(value)) {
+ errors.uppercaseRequired = true;
+ }
+
+ // 包含小写字母
+ if (!/[a-z]/.test(value)) {
+ errors.lowercaseRequired = true;
+ }
+
+ // 包含数字
+ if (!/\d/.test(value)) {
+ errors.numberRequired = true;
+ }
+
+ // 包含特殊字符
+ if (!/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(value)) {
+ errors.specialCharRequired = true;
+ }
+
+ return Object.keys(errors).length > 0 ? errors : null;
+ };
+}
+
+// 使用自定义验证器
+export class PasswordFormComponent {
+ passwordForm = this.fb.group({
+ password: ['', [Validators.required, passwordStrengthValidator()]],
+ confirmPassword: ['', Validators.required]
+ }, {
+ validators: this.passwordMatchValidator
+ });
+
+ private passwordMatchValidator(form: FormGroup) {
+ const password = form.get('password');
+ const confirmPassword = form.get('confirmPassword');
+
+ if (password.value !== confirmPassword.value) {
+ confirmPassword.setErrors({ passwordMismatch: true });
+ } else {
+ confirmPassword.setErrors(null);
+ }
+
+ return null;
+ }
+}
+```
+
+## 常见陷阱与解决方案
+
+### 内存泄漏与订阅管理
+
+不当的表单订阅可能导致内存泄漏：
+
+```typescript
+export class SafeFormComponent implements OnInit, OnDestroy {
+ private subscriptions: Subscription[] = [];
+
+ ngOnInit() {
+ // 正确的订阅方式 - 保存订阅引用
+ const valueChangesSubscription = this.userForm.valueChanges.subscribe(
+ value => this.handleFormChanges(value)
+ );
+ this.subscriptions.push(valueChangesSubscription);
+
+ // 状态变化订阅
+ const statusChangesSubscription = this.userForm.statusChanges.subscribe(
+ status => this.handleFormStatus(status)
+ );
+ this.subscriptions.push(statusChangesSubscription);
+ }
+
+ ngOnDestroy() {
+ // 组件销毁时取消所有订阅
+ this.subscriptions.forEach(sub => sub.unsubscribe());
+ this.subscriptions = [];
+ }
+}
+```
+
+### 表单重置与数据同步
+
+正确处理表单重置和数据同步问题：
+
+```typescript
+export class FormResetComponent {
+ originalData: any;
+
+ // 加载数据并初始化表单
+ loadData(userId: string) {
+ this.userService.getUser(userId).subscribe(user => {
+ this.originalData = { ...user };
+ this.userForm.reset(user);
+ });
+ }
+
+ // 重置表单到初始状态
+ resetForm() {
+ this.userForm.reset(this.originalData);
+ }
+
+ // 取消编辑并返回原始数据
+ cancelEdit() {
+ this.userForm.setValue(this.originalData);
+ }
+}
+```
+
+### 性能优化技巧
+
+1. 避免在模板中进行复杂计算：
+
+```typescript
+// ❌ 不推荐 - 在模板中进行复杂计算
+//
+//
+//
+
+// ✅ 推荐 - 在组件中预计算
+export class OptimizedFormComponent {
+ isPasswordStrong: boolean = false;
+
+ ngOnInit() {
+ this.passwordForm.get('password').valueChanges.subscribe(value => {
+ this.isPasswordStrong = this.checkPasswordStrength(value);
+ });
+ }
+
+ private checkPasswordStrength(password: string): boolean {
+ // 复杂的密码强度检查逻辑
+ return password.length >= 8 && /[A-Z]/.test(password) && /[0-9]/.test(password);
+ }
+}
+```
+
+2. 使用 OnPush 策略优化变更检测：
+
+```typescript
+@Component({
+ selector: 'app-optimized-form',
+ templateUrl: './optimized-form.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class OptimizedFormComponent {
+ @Input() formData: any;
+
+ // 当数据发生变化时手动触发变更检测
+ ngOnChanges() {
+ this.cdr.markForCheck();
+ }
+}
+```
+
+## 结语
+
+DevUI 表单组件作为用户交互的核心组件，其强大功能和灵活性为开发者提供了丰富的可能性。通过深入理解其工作机制，合理运用高级特性，并规避常见陷阱，我们可以构建出高性能、高可用的企业级表单应用。
+
+在实际项目中，建议根据具体业务需求选择合适的功能组合，避免过度设计。同时，持续关注 DevUI 的更新和最佳实践，不断提升开发技能和产品质量。只有在实践中不断总结和完善，才能真正掌握 DevUI 表单组件的精髓，为企业级应用开发提供有力支撑。
\ No newline at end of file
- @for (item of [
- { title: 'Explore the Docs', link: 'https://angular.dev' },
- { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' },
- { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },
- { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' },
- { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' },
- ]; track item.title) {
-
- {{ item.title }}
-
-
- }
+
+
+
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b0ed379..d137cf0 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,13 +1,113 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Component, Renderer2, OnInit, OnDestroy } from '@angular/core';
+import { RouterOutlet, RouterLink, RouterLinkActive, Router } from '@angular/router';
+import { NgIf } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
- imports: [RouterOutlet],
+ imports: [RouterOutlet, RouterLink, RouterLinkActive, NgIf],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
-export class AppComponent {
+export class AppComponent implements OnInit, OnDestroy {
title = 'xieu';
-}
+
+ private clickListener!: () => void;
+ private resizeListener!: () => void;
+
+ constructor(private renderer: Renderer2, private router: Router) {}
+
+ ngOnInit() {
+ // 监听文档点击事件，用于在小屏幕上点击外部区域关闭菜单
+ this.clickListener = this.renderer.listen('document', 'click', (event) => {
+ const sidebar = document.getElementById('sidebar');
+ const toggleButton = document.querySelector('.menu-toggle');
+ const overlay = document.getElementById('overlay');
+
+ if (sidebar && toggleButton &&
+ !sidebar.contains(event.target) &&
+ !toggleButton.contains(event.target) &&
+ !sidebar.classList.contains('collapsed') &&
+ window.innerWidth <= 768) {
+ this.toggleSidebar();
+ }
+ });
+
+ // 监听窗口大小变化
+ this.resizeListener = this.renderer.listen('window', 'resize', () => {
+ this.onResize();
+ });
+
+ // 初始化时检查窗口大小
+ this.onResize();
+ }
+
+ ngOnDestroy() {
+ // 清理事件监听器
+ if (this.clickListener) {
+ this.clickListener();
+ }
+ if (this.resizeListener) {
+ this.resizeListener();
+ }
+ }
+
+ toggleSidebar() {
+ const sidebar = document.getElementById('sidebar');
+ const mainContent = document.getElementById('mainContent');
+ const overlay = document.getElementById('overlay');
+
+ if (sidebar && mainContent) {
+ sidebar.classList.toggle('collapsed');
+
+ // 在小屏幕上显示/隐藏遮罩层
+ if (window.innerWidth <= 768) {
+ if (sidebar.classList.contains('collapsed')) {
+ if (overlay) {
+ overlay.classList.remove('active');
+ }
+ mainContent.classList.add('expanded');
+ } else {
+ if (overlay) {
+ overlay.classList.add('active');
+ }
+ mainContent.classList.remove('expanded');
+ }
+ }
+ }
+ }
+
+ onResize() {
+ const sidebar = document.getElementById('sidebar');
+ const mainContent = document.getElementById('mainContent');
+ const overlay = document.getElementById('overlay');
+
+ if (window.innerWidth > 768) {
+ // 大屏幕：确保侧边栏展开
+ if (sidebar) {
+ sidebar.classList.remove('collapsed');
+ }
+ if (mainContent) {
+ mainContent.classList.remove('expanded');
+ }
+ if (overlay) {
+ overlay.classList.remove('active');
+ }
+ } else {
+ // 小屏幕：默认折叠侧边栏
+ if (sidebar && !sidebar.classList.contains('collapsed')) {
+ sidebar.classList.add('collapsed');
+ }
+ if (mainContent) {
+ mainContent.classList.add('expanded');
+ }
+ if (overlay) {
+ overlay.classList.remove('active');
+ }
+ }
+ }
+
+ isHomePage(): boolean {
+ return this.router.url === '/';
+ }
+}
\ No newline at end of file
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index dc39edb..66709c7 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,3 +1,8 @@
import { Routes } from '@angular/router';
+import { NewPageComponent } from './new-page/new-page.component';
+import { DevuiFormComponent } from './devui-form/devui-form.component';
-export const routes: Routes = [];
+export const routes: Routes = [
+ { path: 'new-page', component: NewPageComponent },
+ { path: 'devui-form', component: DevuiFormComponent },
+];
diff --git a/src/app/devui-form/devui-form.component.ts b/src/app/devui-form/devui-form.component.ts
new file mode 100644
index 0000000..4cc6a50
--- /dev/null
+++ b/src/app/devui-form/devui-form.component.ts
@@ -0,0 +1,323 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { Observable, of, timer } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+
+@Component({
+ selector: 'app-devui-form',
+ standalone: true,
+ imports: [ReactiveFormsModule, CommonModule, RouterLink],
+ template: `
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+ 用户总数
+ 12,345
+ ↑ 12% 上月
+
+
+ 订单数量
+ 1,234
+ ↑ 5% 上周
+
+
+ 收入
+ ¥56,789
+ ↑ 8% 今天
+
+
任务完成率
+ 89%
+ ↑ 3% 本月
+
+ ← 返回首页
+
+ `,
+ styles: [`
+ .container {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+ }
+
+ .back-link {
+ display: inline-block;
+ margin-bottom: 1rem;
+ color: #007bff;
+ text-decoration: none;
+ }
+
+ .form-container {
+ background: #f9f9f9;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ }
+
+ .form-group {
+ margin-bottom: 20px;
+ }
+
+ label {
+ display: block;
+ margin-bottom: 5px;
+ font-weight: bold;
+ }
+
+ .form-control {
+ width: 100%;
+ padding: 10px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 16px;
+ box-sizing: border-box;
+ }
+
+ .form-control.error {
+ border-color: #dc3545;
+ }
+
+ .error-message {
+ color: #dc3545;
+ font-size: 14px;
+ margin-top: 5px;
+ }
+
+ .checkbox-group label {
+ font-weight: normal;
+ display: flex;
+ align-items: center;
+ }
+
+ .checkbox-group input {
+ width: auto;
+ margin-right: 8px;
+ }
+
+ .form-actions {
+ display: flex;
+ gap: 10px;
+ margin-top: 20px;
+ }
+
+ .btn {
+ padding: 10px 20px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 16px;
+ }
+
+ .btn-primary {
+ background-color: #007bff;
+ color: white;
+ }
+
+ .btn-primary:disabled {
+ background-color: #ccc;
+ cursor: not-allowed;
+ }
+
+ .btn-secondary {
+ background-color: #6c757d;
+ color: white;
+ }
+
+ .form-data {
+ margin-top: 30px;
+ padding: 20px;
+ background: #e9ecef;
+ border-radius: 4px;
+ }
+
+ .form-data pre {
+ background: white;
+ padding: 15px;
+ border-radius: 4px;
+ overflow: auto;
+ }
+
+ @media (max-width: 768px) {
+ .container {
+ padding: 10px;
+ }
+
+ .form-container {
+ padding: 15px;
+ }
+
+ .form-actions {
+ flex-direction: column;
+ }
+
+ .btn {
+ width: 100%;
+ margin-bottom: 10px;
+ }
+ }
+ `]
+})
+export class DevuiFormComponent implements OnInit {
+ userForm: FormGroup;
+ showAdminFields = false;
+ submittedData: any = null;
+
+ constructor(private fb: FormBuilder) {
+ this.userForm = this.fb.group({
+ username: ['', [Validators.required, Validators.minLength(3)]],
+ email: ['', [Validators.required, Validators.email]],
+ age: ['', [Validators.required, Validators.min(18), Validators.max(100)]],
+ department: ['', Validators.required],
+ isAdmin: [false]
+ });
+ }
+
+ ngOnInit() {
+ // 监听用户名变化以演示异步验证
+ this.userForm.get('username')?.valueChanges.subscribe(value => {
+ console.log('Username changed:', value);
+ });
+ }
+
+ // 动态添加/删除管理员字段
+ toggleAdminFields(event: any) {
+ const isChecked = event.target.checked;
+ this.showAdminFields = isChecked;
+
+ if (isChecked) {
+ this.userForm.addControl('adminCode',
+ this.fb.control('', [Validators.required, Validators.minLength(6)]));
+ } else {
+ this.userForm.removeControl('adminCode');
+ }
+ }
+
+ // 异步验证器模拟
+ uniqueUsernameValidator() {
+ return (control: any) => {
+ if (!control.value) {
+ return of(null);
+ }
+
+ // 模拟服务端检查用户名是否已存在
+ const isTaken = control.value.toLowerCase() === 'admin' ||
+ control.value.toLowerCase() === 'user' ||
+ control.value.toLowerCase() === 'test';
+
+ // 模拟网络延迟
+ return timer(500).pipe(
+ map(() => isTaken ? { usernameTaken: true } : null)
+ );
+ };
+ }
+
+ onSubmit() {
+ if (this.userForm.valid) {
+ this.submittedData = this.userForm.value;
+ console.log('Form submitted:', this.userForm.value);
+ } else {
+ // 标记所有字段为已触碰以显示验证错误
+ this.markFormGroupTouched();
+ }
+ }
+
+ resetForm() {
+ this.userForm.reset({
+ isAdmin: false
+ });
+ this.showAdminFields = false;
+ this.submittedData = null;
+ }
+
+ private markFormGroupTouched() {
+ Object.keys(this.userForm.controls).forEach(key => {
+ const control = this.userForm.get(key);
+ control?.markAsTouched();
+ });
+ }
+}
\ No newline at end of file
diff --git a/src/app/new-page/new-page.component.ts b/src/app/new-page/new-page.component.ts
new file mode 100644
index 0000000..f3118d2
--- /dev/null
+++ b/src/app/new-page/new-page.component.ts
@@ -0,0 +1,71 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+ selector: 'app-new-page',
+ standalone: true,
+ imports: [RouterLink],
+ template: `
+ DevUI 表单示例
+根据《组件使用进阶-表单的邪修使用与避坑指南》文档实现的示例
+ + + +
+
+ 提交的数据:
+{{ submittedData | json }}
+
+
+ `,
+ styles: [`
+ .container {
+ padding: 1rem;
+ max-width: 800px;
+ margin: 0 auto;
+ }
+
+ .content {
+ margin-top: 2rem;
+ }
+
+ .card {
+ background: white;
+ border-radius: 8px;
+ padding: 1.5rem;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ margin-top: 1.5rem;
+ }
+
+ h2 {
+ margin-top: 0;
+ color: #333;
+ }
+
+ ul {
+ padding-left: 1.5rem;
+ }
+
+ li {
+ margin-bottom: 0.5rem;
+ }
+
+ @media (max-width: 768px) {
+ .container {
+ padding: 0.5rem;
+ }
+
+ .card {
+ padding: 1rem;
+ }
+ }
+ `]
+})
+export class NewPageComponent {
+ constructor() { }
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 35b00f3..a7b0260 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,5 +2,17 @@ import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
+import {
+ devuiLightTheme,
+ ThemeServiceInit
+} from 'ng-devui/theme';
+
+import { infinityTheme } from 'ng-devui/theme-collection';
+
+ThemeServiceInit({
+ 'devui-light-theme': devuiLightTheme,
+ 'infinity-theme': infinityTheme,
+}, 'infinity-theme');
+
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));
diff --git a/组件使用进阶-表单的邪修使用与避坑指南.md b/组件使用进阶-表单的邪修使用与避坑指南.md
new file mode 100644
index 0000000..82a154a
--- /dev/null
+++ b/组件使用进阶-表单的邪修使用与避坑指南.md
@@ -0,0 +1,391 @@
+ DevUI 组件使用进阶：表单深度用法与避坑指南
+---
+表单作为用户与系统交互的核心界面，其设计直接影响用户体验和数据质量。本文将深入探讨 DevUI 表单组件的高级用法和常见陷阱，帮助开发攻城狮们构建更高效、更可靠的表单应用。
+
+## 表单组件核心特性深度解析
+
+DevUI 表单组件（d-form）不仅仅是一个简单的数据收集容器，它是一套完整的数据验证和管理解决方案。其设计充分考虑了企业级应用场景下的各种复杂需求。
+
+### 响应式表单与动态验证
+
+DevUI 表单组件支持强大的响应式表单功能，可以实现复杂的动态验证逻辑：
+
+```typescript
+import { FormBuilder, Validators, FormGroup } from '@angular/forms';
+
+export class DynamicFormComponent {
+ userForm: FormGroup;
+
+ constructor(private fb: FormBuilder) {
+ this.userForm = this.fb.group({
+ username: ['', [Validators.required, Validators.minLength(3)]],
+ email: ['', [Validators.required, Validators.email]],
+ age: ['', [Validators.required, Validators.min(18), Validators.max(100)]],
+ department: ['', Validators.required]
+ });
+ }
+
+ // 动态添加验证规则
+ toggleAdminFields(isAdmin: boolean) {
+ if (isAdmin) {
+ this.userForm.addControl('adminCode',
+ this.fb.control('', [Validators.required, Validators.minLength(6)]));
+ } else {
+ this.userForm.removeControl('adminCode');
+ }
+ }
+}
+```
+
+在实际应用中，需要注意几个关键点：
+1. 动态添加/删除表单控件时要确保验证状态正确更新
+2. 使用 `updateValueAndValidity()` 方法在必要时手动触发验证更新
+3. 合理使用 `setValue()` 和 `patchValue()` 方法更新表单值
+
+### 异步验证与防抖处理
+
+对于需要服务端验证的场景（如用户名唯一性检查），DevUI 表单支持异步验证：
+
+```typescript
+import { AbstractControl, AsyncValidatorFn } from '@angular/forms';
+import { Observable, of, timer } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+
+export class AsyncValidationComponent {
+ // 异步验证器
+ uniqueUsernameValidator(): AsyncValidatorFn {
+ return (control: AbstractControl): Observable<{[key: string]: any} | null> => {
+ if (!control.value) {
+ return of(null);
+ }
+
+ // 防抖处理，避免频繁请求
+ return timer(500).pipe(
+ switchMap(() => this.userService.checkUsernameExists(control.value)),
+ map(exists => exists ? { usernameTaken: true } : null)
+ );
+ };
+ }
+
+ ngOnInit() {
+ this.userForm = this.fb.group({
+ username: ['',
+ [Validators.required],
+ [this.uniqueUsernameValidator()]
+ ]
+ });
+ }
+}
+```
+
+## 表单布局与复杂结构处理
+
+### 响应式布局与栅格系统
+
+DevUI 表单组件与栅格系统紧密结合，可以实现灵活的响应式布局：
+
+```html
+新页面
+这是通过侧边栏菜单访问的新页面
+
+
+ 此页面展示了管理后台中的一个典型内容页面。您可以在这里放置表单、数据表格或其他业务功能。
+
+
+ 功能示例
+-
+
- 数据展示 +
- 表单输入 +
- 图表显示 +
- 操作按钮 +