Browse Source

reset form function added

pull/24547/head
erdemcaygor 11 months ago
parent
commit
1963745f8a
  1. 4
      npm/ng-packs/apps/dev-app/src/app/home/home.component.html
  2. 84
      npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
  3. 4
      npm/ng-packs/apps/dev-app/src/server.ts
  4. 8
      npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts

4
npm/ng-packs/apps/dev-app/src/app/home/home.component.html

@ -1,4 +1,6 @@
<div class="container">
<abp-dynamic-form [fields]="formFields" (onSubmit)="submit($event)">
</abp-dynamic-form>
<div class="p-5 text-center">
<div class="d-inline-block bg-success text-white p-1 h5 rounded mb-4" role="alert">
<h5 class="m-1">
@ -7,8 +9,6 @@
</h5>
</div>
<abp-dynamic-form [fields]="formFields"></abp-dynamic-form>
<h1>{{ '::Welcome' | abpLocalization }}</h1>
<p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>

84
npm/ng-packs/apps/dev-app/src/app/home/home.component.ts

@ -1,21 +1,99 @@
import { AuthService, LocalizationPipe } from '@abp/ng.core';
import { Component, inject } from '@angular/core';
import { Component, inject, ViewChild } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { ButtonComponent, CardBodyComponent, CardComponent } from '@abp/ng.theme.shared';
import { DynamicFormComponent, FormFieldConfig } from '@abp/ng.components/dynamic-form';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
imports: [NgTemplateOutlet, LocalizationPipe, CardComponent, CardBodyComponent, ButtonComponent],
imports: [NgTemplateOutlet, LocalizationPipe, CardComponent, CardBodyComponent, ButtonComponent, DynamicFormComponent],
})
export class HomeComponent {
@ViewChild(DynamicFormComponent, { static: true }) dynamicFormComponent: DynamicFormComponent;
protected readonly authService = inject(AuthService);
formFields: FormFieldConfig[] = [
{
key: 'firstName',
type: 'text',
label: 'First Name',
placeholder: 'Enter first name',
value: 'erdemc',
required: true,
validators: [
{ type: 'required', message: 'First name is required' },
{ type: 'minLength', value: 2, message: 'Minimum 2 characters required' }
],
gridSize: 6,
order: 1
},
{
key: 'lastName',
type: 'text',
label: 'Last Name',
placeholder: 'Enter last name',
required: true,
validators: [
{ type: 'required', message: 'Last name is required' }
],
gridSize: 12,
order: 3
},
{
key: 'email',
type: 'email',
label: 'Email Address',
placeholder: 'Enter email',
required: true,
validators: [
{ type: 'required', message: 'Email is required' },
{ type: 'email', message: 'Please enter a valid email' }
],
gridSize: 6,
order: 2
},
{
key: 'userType',
type: 'select',
label: 'User Type',
required: true,
options: [
{ key: 'admin', value: 'Administrator' },
{ key: 'user', value: 'Regular User' },
{ key: 'guest', value: 'Guest User' }
],
validators: [
{ type: 'required', message: 'Please select user type' }
],
order: 4
},
{
key: 'adminNotes',
type: 'textarea',
label: 'Admin Notes',
placeholder: 'Enter admin-specific notes',
conditionalLogic: [
{
dependsOn: 'userType',
condition: 'equals',
value: 'admin',
action: 'show'
}
],
order: 5
}
];
loading = false;
get hasLoggedIn(): boolean {
return this.authService.isAuthenticated;
}
submit(val) {
console.log('submit', val);
this.dynamicFormComponent.resetForm();
}
login() {
this.loading = true;
this.authService.navigateToLogin();

4
npm/ng-packs/apps/dev-app/src/server.ts

@ -11,9 +11,7 @@ import {environment} from './environments/environment';
import * as oidc from 'openid-client';
import { ServerCookieParser } from '@abp/ng.core';
if (environment.production === false) {
process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";
}
process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');

8
npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts

@ -6,7 +6,8 @@ import {
inject,
OnInit,
DestroyRef,
ChangeDetectorRef
ChangeDetectorRef,
effect,
} from '@angular/core';
import { FormGroup, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
@ -26,6 +27,7 @@ import { DynamicFormFieldComponent } from './dynamic-form-field';
})
export class DynamicFormComponent implements OnInit {
fields = input<FormFieldConfig[]>([]);
values = input<Record<string, any>>();
submitButtonText = input<string>('Submit');
submitInProgress = input<boolean>(false);
showCancelButton = input<boolean>(false);
@ -40,6 +42,10 @@ export class DynamicFormComponent implements OnInit {
ngOnInit() {
this.setupFormAndLogic();
effect(() => {
console.log(this.values());
});
}
get sortedFields(): FormFieldConfig[] {

Loading…
Cancel
Save