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 1 year ago
parent
d19134b999
commit
fb0dd4416d
4 changed files with 132 additions and 97 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. 182
      npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
  2. 9
      npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.ts
  3. 27
      npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.html
  4. 11
      npm/ng-packs/packages/components/dynamic-form/src/dynamic-form.component.ts

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

@ -1,92 +1,94 @@
<div class="field-container"> @if (visible()) {
<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"
[placeholder]="field().placeholder || ''" [placeholder]="field().placeholder || ''"
[(value)]="value" [(value)]="value"
class="form-control"> class="form-control">
<!-- @if (isFieldInvalid()) { <!-- @if (isFieldInvalid()) {
<div class="invalid-feedback"> <div class="invalid-feedback">
{{ getErrorMessage() }} {{ getErrorMessage() }}
</div> </div>
}--> }-->
</div> </div>
} @else if (field().type === 'select') { } @else if (field().type === 'select') {
<!-- Select Dropdown --> <!-- Select Dropdown -->
<div class="form-group"> <div class="form-group">
<label [for]="field().key">{{ field().label }}</label> <label [for]="field().key">{{ field().label }}</label>
<select <select
[id]="field().key" [id]="field().key"
[(value)]="value" [(value)]="value"
class="form-control"> class="form-control">
<option value="">Please select...</option> <option value="">Please select...</option>
@for (option of field().options; track option.key) { @for (option of field().options; track option.key) {
<option <option
[value]="option.key"> [value]="option.key">
{{ option.value }} {{ option.value }}
</option> </option>
} }
</select> </select>
<!-- @if (isFieldInvalid()) { <!-- @if (isFieldInvalid()) {
<div class="invalid-feedback"> <div class="invalid-feedback">
{{ getErrorMessage() }} {{ getErrorMessage() }}
</div> </div>
}--> }-->
</div> </div>
} @else if (field().type === 'checkbox') { } @else if (field().type === 'checkbox') {
<!-- Checkbox --> <!-- Checkbox -->
<div class="form-group form-check"> <div class="form-group form-check">
<input <input
type="checkbox" type="checkbox"
[id]="field().key" [id]="field().key"
[(value)]="value" [(value)]="value"
class="form-check-input"> class="form-check-input">
<label class="form-check-label" [for]="field().key"> <label class="form-check-label" [for]="field().key">
{{ field().label }} {{ field().label }}
</label> </label>
<!-- @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 === 'email') {
<!-- Email Input --> <!-- Email 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
type="email" type="email"
[id]="field().key" [id]="field().key"
[(value)]="value" [(value)]="value"
[placeholder]="field().placeholder || ''" [placeholder]="field().placeholder || ''"
class="form-control"> class="form-control">
<!-- @if (isFieldInvalid()) { <!-- @if (isFieldInvalid()) {
<div class="invalid-feedback"> <div class="invalid-feedback">
{{ getErrorMessage() }} {{ getErrorMessage() }}
</div> </div>
}--> }-->
</div> </div>
} @else if (field().type === 'textarea') { } @else if (field().type === 'textarea') {
<!-- Textarea --> <!-- Textarea -->
<div class="form-group"> <div class="form-group">
<label [for]="field().key">{{ field().label }}</label> <label [for]="field().key">{{ field().label }}</label>
<textarea <textarea
[id]="field().key" [id]="field().key"
[(value)]="value" [(value)]="value"
[placeholder]="field().placeholder || ''" [placeholder]="field().placeholder || ''"
rows="4" rows="4"
class="form-control"> class="form-control">
</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-->
}

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

@ -1,7 +1,9 @@
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef,
Component, Component,
forwardRef, forwardRef,
inject,
InjectionToken, InjectionToken,
input, input,
} from '@angular/core'; } from '@angular/core';
@ -32,12 +34,14 @@ const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = {
export class DynamicFormFieldComponent implements ControlValueAccessor { export class DynamicFormFieldComponent implements ControlValueAccessor {
field = input.required<FormFieldConfig>(); field = input.required<FormFieldConfig>();
isVisible = input<boolean>(true); visible = input<boolean>(true);
disabled = false; disabled = false;
value: any; value: any;
readonly changeDetectorRef = inject(ChangeDetectorRef);
writeValue(value: any[]): void { writeValue(value: any[]): void {
// this.value = value;
this.changeDetectorRef.markForCheck();
} }
registerOnChange(fn: any): void { registerOnChange(fn: any): void {
@ -50,6 +54,7 @@ export class DynamicFormFieldComponent implements ControlValueAccessor {
setDisabledState(isDisabled: boolean): void { setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled; this.disabled = isDisabled;
this.changeDetectorRef.markForCheck();
} }
private onChange: (value: any) => void = () => {}; private onChange: (value: any) => void = () => {};

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

@ -0,0 +1,27 @@
<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()" class="dynamic-form">
@for (field of sortedFields; track field.key) {
<div class="row">
<div [ngClass]="'col-md-' + (field.gridSize || 12)">
<abp-dynamic-form-field
[field]="field"
[formControlName]="field.key"
[visible]="isFieldVisible(field)">
</abp-dynamic-form-field>
</div>
</div>
}
<div class="form-actions">
<button
type="button"
class="btn btn-secondary"
(click)="onCancel()">
Cancel
</button>
<button
type="submit"
class="btn btn-primary"
[disabled]="!dynamicForm.valid || isSubmitting">
{{ submitButtonText() }}
</button>
</div>
</form>

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

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, Component, input, output, inject } from '@angular/core'; import { ChangeDetectionStrategy, Component, input, output, inject, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms'; import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { DynamicFormService } from './dynamic-form.service'; import { DynamicFormService } from './dynamic-form.service';
import { FormFieldConfig } from './dynamic-form.models'; import { FormFieldConfig } from './dynamic-form.models';
@ -7,11 +7,12 @@ import { DynamicFormFieldComponent } from './dynamic-form-field';
@Component({ @Component({
selector: 'abp-dynamic-form', selector: 'abp-dynamic-form',
template: ``, templateUrl: './dynamic-form.component.html',
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
imports: [CommonModule, DynamicFormFieldComponent, ReactiveFormsModule],
}) })
export class DynamicFormComponent { export class DynamicFormComponent implements OnInit {
fields = input<FormFieldConfig[]>([]); fields = input<FormFieldConfig[]>([]);
submitButtonText = input<string>('Submit'); submitButtonText = input<string>('Submit');
formSubmit = output<any>(); formSubmit = output<any>();

Write Preview
Loading…
Cancel
Save