tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

refactoring

pull/24547/head
erdemcaygor 11 months ago
parent
753350d150
commit
5ca3db5c23
2 changed files with 117 additions and 130 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 180
      npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
  2. 67
      npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts

180
npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
View File

@ -1,99 +1,87 @@
@if (isVisible) { <div class="field-container">
<div class="field-container">
@if (field.type === 'text') { @if (field().type === 'text') {
<!-- Text Input --> <!-- Text Input -->
<div class="form-group"> <div class="form-group">
<label [for]="field.key">{{ field.label }}</label> <label [for]="field().key">{{ field().label }}</label>
<input <input
[id]="field.key" [id]="field().key"
[formControlName]="field.key" [placeholder]="field().placeholder || ''"
[placeholder]="field.placeholder || ''" class="form-control">
class="form-control" <!-- @if (isFieldInvalid()) {
[class.is-invalid]="isFieldInvalid()"> <div class="invalid-feedback">
@if (isFieldInvalid()) { {{ getErrorMessage() }}
<div class="invalid-feedback"> </div>
{{ getErrorMessage() }} }-->
</div> </div>
} @else if (field().type === 'select') {
<!-- Select Dropdown -->
<div class="form-group">
<label [for]="field().key">{{ field().label }}</label>
<select
[id]="field().key"
class="form-control">
<option value="">Please select...</option>
@for (option of field().options; track option.key) {
<option
[value]="option.key">
{{ option.value }}
</option>
} }
</div> </select>
} @else if (field.type === 'select') { <!-- @if (isFieldInvalid()) {
<!-- Select Dropdown --> <div class="invalid-feedback">
<div class="form-group"> {{ getErrorMessage() }}
<label [for]="field.key">{{ field.label }}</label> </div>
<select }-->
[id]="field.key" </div>
[formControlName]="field.key" } @else if (field().type === 'checkbox') {
class="form-control" <!-- Checkbox -->
[class.is-invalid]="isFieldInvalid()"> <div class="form-group form-check">
<option value="">Please select...</option> <input
@for (option of field.options; track option.key) { type="checkbox"
<option [id]="field().key"
[value]="option.key"> class="form-check-input">
{{ option.value }} <label class="form-check-label" [for]="field().key">
</option> {{ field().label }}
} </label>
</select> <!-- @if (isFieldInvalid()) {
@if (isFieldInvalid()) { <div class="invalid-feedback">
<div class="invalid-feedback"> {{ getErrorMessage() }}
{{ getErrorMessage() }} </div>
</div> }-->
} </div>
</div> } @else if (field().type === 'email') {
} @else if (field.type === 'checkbox') { <!-- Email Input -->
<!-- Checkbox --> <div class="form-group">
<div class="form-group form-check"> <label [for]="field().key">{{ field().label }}</label>
<input <input
type="checkbox" type="email"
[id]="field.key" [id]="field().key"
[formControlName]="field.key" [placeholder]="field().placeholder || ''"
class="form-check-input" class="form-control">
[class.is-invalid]="isFieldInvalid()"> <!-- @if (isFieldInvalid()) {
<label class="form-check-label" [for]="field.key"> <div class="invalid-feedback">
{{ field.label }} {{ getErrorMessage() }}
</label> </div>
@if (isFieldInvalid()) { }-->
<div class="invalid-feedback"> </div>
{{ getErrorMessage() }} } @else if (field().type === 'textarea') {
</div> <!-- Textarea -->
} <div class="form-group">
</div> <label [for]="field().key">{{ field().label }}</label>
} @else if (field.type === 'email') { <textarea
<!-- Email Input --> [id]="field().key"
<div class="form-group"> [placeholder]="field().placeholder || ''"
<label [for]="field.key">{{ field.label }}</label> rows="4"
<input class="form-control">
type="email"
[id]="field.key"
[formControlName]="field.key"
[placeholder]="field.placeholder || ''"
class="form-control"
[class.is-invalid]="isFieldInvalid()">
@if (isFieldInvalid()) {
<div class="invalid-feedback">
{{ getErrorMessage() }}
</div>
}
</div>
} @else if (field.type === 'textarea') {
<!-- Textarea -->
<div class="form-group">
<label [for]="field.key">{{ field.label }}</label>
<textarea
[id]="field.key"
[formControlName]="field.key"
[placeholder]="field.placeholder || ''"
rows="4"
class="form-control"
[class.is-invalid]="isFieldInvalid()">
</textarea> </textarea>
@if (isFieldInvalid()) { <!-- @if (isFieldInvalid()) {
<div class="invalid-feedback"> <div class="invalid-feedback">
{{ getErrorMessage() }} {{ getErrorMessage() }}
</div> </div>
} }-->
</div> </div>
} }
</div> </div>
<!-- Add more field types as needed--> <!-- Add more field types as needed-->
}

67
npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
View File

@ -1,12 +1,26 @@
import { ChangeDetectionStrategy, Component, InjectionToken } from '@angular/core'; import {
ChangeDetectionStrategy,
Component,
forwardRef,
InjectionToken,
input,
} from '@angular/core';
import { NgTemplateOutlet } from '@angular/common'; import { NgTemplateOutlet } from '@angular/common';
import { FormFieldConfig } from '../dynamic-form.models';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
export const ABP_DYNAMIC_FORM_FIELD = new InjectionToken<DynamicFormFieldComponent>('AbpDynamicFormField'); export const ABP_DYNAMIC_FORM_FIELD = new InjectionToken<DynamicFormFieldComponent>('AbpDynamicFormField');
const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DynamicFormFieldComponent),
multi: true,
};
@Component({ @Component({
selector: 'abp-dynamic-form-field', selector: 'abp-dynamic-form-field',
templateUrl: './dynamic-form-field.component.html', templateUrl: './dynamic-form-field.component.html',
providers: [{ provide: ABP_DYNAMIC_FORM_FIELD, useExisting: DynamicFormFieldComponent }], providers: [{ provide: ABP_DYNAMIC_FORM_FIELD, useExisting: DynamicFormFieldComponent }, DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR],
host: { 'class': 'abp-dynamic-form-field' }, host: { 'class': 'abp-dynamic-form-field' },
exportAs: 'abpDynamicFormField', exportAs: 'abpDynamicFormField',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
@ -15,42 +29,27 @@ export const ABP_DYNAMIC_FORM_FIELD = new InjectionToken<DynamicFormFieldCompone
] ]
}) })
export class DynamicFormFieldComponent { export class DynamicFormFieldComponent implements ControlValueAccessor {
field = input<FormFieldConfig>(); field = input.required<FormFieldConfig>();
@Input() isVisible: boolean = true; isVisible = input<boolean>(true);
disabled = false;
ngOnInit() {
const control = this.form.get(this.field.key);
if (control) {
control.valueChanges.subscribe(value => {
this.fieldChange.emit({ fieldKey: this.field.key, value });
});
}
}
isFieldInvalid(): boolean { writeValue(value: any[]): void {
const control = this.form.get(this.field.key); //
return !!(control && control.invalid && (control.dirty || control.touched));
} }
getErrorMessage(): string { registerOnChange(fn: any): void {
const control = this.form.get(this.field.key); this.onChange = fn;
if (!control || !control.errors) return ''; }
const validators = this.field.validators || [];
for (const validator of validators) {
if (control.errors[validator.type]) {
return validator.message;
}
}
// Fallback error messages registerOnTouched(fn: any): void {
if (control.errors['required']) return `${this.field.label} is required`; this.onTouched = fn;
if (control.errors['email']) return 'Please enter a valid email address'; }
if (control.errors['minlength']) return `Minimum length is ${control.errors['minlength'].requiredLength}`;
if (control.errors['maxlength']) return `Maximum length is ${control.errors['maxlength'].requiredLength}`;
return 'Invalid input'; setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
} }
private onChange: (value: any) => void = () => {};
private onTouched: () => void = () => {};
} }

Write Preview
Loading…
Cancel
Save