example

npm/ng-packs/apps/dev-app/src/app/abp-form-field-demo/abp-form-field-demo.component.html

@@ -0,0 +1,30 @@
+<abp-card>
+    <abp-card-header>
+        <h3>Abp Form Field Demo</h3>
+    </abp-card-header>
+    <abp-card-body>
+        <form [formGroup]="form" (ngSubmit)="submit()">
+            <abp-form-field>
+              <abp-form-field-label>Name</abp-form-field-label>
+                <abp-input formControlName="name" />
+            </abp-form-field>
+
+            <abp-form-field>
+              <abp-form-field-label>Email</abp-form-field-label>
+              <abp-input formControlName="email" />
+            </abp-form-field>
+
+            <abp-form-field>
+              <abp-form-field-label>Password</abp-form-field-label>
+              <abp-input formControlName="password" />
+            </abp-form-field>
+
+            <abp-form-field>
+              <abp-form-field-label>Age</abp-form-field-label>
+              <abp-input formControlName="age" />
+            </abp-form-field>
+
+            <button type="submit" class="btn btn-primary" [disabled]="form.invalid">Submit</button>
+        </form>
+    </abp-card-body>
+</abp-card>

npm/ng-packs/apps/dev-app/src/app/abp-form-field-demo/abp-form-field-demo.component.ts

@@ -0,0 +1,42 @@
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { AbpFormFieldComponent, AbpFormFieldLabelComponent } from '@abp/ng.components/abp-form-field';
+import { CardComponent, CardBodyComponent, CardHeaderComponent } from '@abp/ng.theme.shared';
+import { CommonModule } from '@angular/common';
+import { AbpInputComponent } from '@abp/ng.components/abp-input';
+
+@Component({
+  selector: 'app-abp-form-field-demo',
+  templateUrl: './abp-form-field-demo.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    AbpFormFieldComponent,
+    CardComponent,
+    CardBodyComponent,
+    CardHeaderComponent,
+    AbpInputComponent,
+    AbpFormFieldLabelComponent,
+  ],
+})
+export class AbpFormFieldDemoComponent {
+  private fb = inject(FormBuilder);
+
+  form = this.fb.group({
+    name: ['', [Validators.required, Validators.minLength(3)]],
+    email: ['', [Validators.required, Validators.email]],
+    password: ['', [Validators.required, Validators.minLength(6)]],
+    age: [null, [Validators.required, Validators.min(18)]],
+    description: ['', [Validators.maxLength(200)]],
+    agree: [false, [Validators.requiredTrue]],
+  });
+
+  submit() {
+    if (this.form.valid) {
+      console.log(this.form.value);
+    } else {
+      console.log('Form is invalid');
+    }
+  }
+}

npm/ng-packs/apps/dev-app/src/app/app.routes.ts

@@ -6,6 +6,10 @@ export const appRoutes: Routes = [
     pathMatch: 'full',
     loadComponent: () => import('./home/home.component').then(m => m.HomeComponent),
   },
+  {
+    path: 'form-field-demo',
+    loadComponent: () => import('./abp-form-field-demo/abp-form-field-demo.component').then(m => m.AbpFormFieldDemoComponent),
+  },
   {
     path: 'account',
     loadChildren: () => import('@abp/ng.account').then(m => m.createRoutes()),

npm/ng-packs/apps/dev-app/src/app/route.provider.ts

@@ -16,6 +16,13 @@ function configureRoutes() {
       iconClass: 'fas fa-home',
       order: 1,
       layout: eLayoutType.application,
+    },
+    {
+      path: '/form-field-demo',
+      name: 'Form Field Demo',
+      iconClass: 'fas fa-file-alt',
+      order: 2,
+      layout: eLayoutType.application,
     }
   ]);
 }