Örnekler

Bu sayfa uçtan uca bir örnek gösterir:

1. İki adet field model class oluşturma: TextboxField, TextareaField
2. İki adet field component oluşturma: TextboxComponent, TextareaComponent
3. NvsDynamicFormModule.forRoot(...) ile register etme
4. Bir sayfada formu örnekleyip submit sonucunu yakalama

HTML/CSS tamamen size kalmış — asıl kritik kısım şu kontrat: Her field component’i kendi field model’ına göre render edebilmeli ve alttaki form control’a bağlanabilmeli.

1) Field model class’larını oluştur

Bu örnekte field model class’ları kütüphanedeki FieldBase<T> tipini extend eder.

textbox.type.ts

import { TemplateRef } from '@angular/core';
import { FieldBase } from '@nvs-dynamic-form/ng-core';

export class TextboxField extends FieldBase<string> {
  override readonly fieldType? = 'textbox';

  icon?: TemplateRef<any>;
  onIconClick?: (value?: string) => void;
  type?: 'email' | 'number' | 'password' | 'tel' | 'text' | 'url';
  placeholder?: string;

  constructor(options: TextboxField) {
    super(options, '');
    this.type = options.type ?? 'text';
    this.icon = options.icon;
    this.placeholder = options.placeholder ?? '';
    this.onIconClick = options.onIconClick;
  }
}

textarea.type.ts

import { FieldBase } from '@nvs-dynamic-form/ng-core';

export class TextareaField extends FieldBase<string> {
  override readonly fieldType? = 'textarea';

  minRowSize?: number;
  placeholder?: string;
  maxRowSize?: number;

  constructor(options: TextareaField) {
    super(options, '');
    this.minRowSize = options.minRowSize ?? 3;
    this.maxRowSize = options.maxRowSize ?? 10;
    this.placeholder = options.placeholder ?? '';
  }
}

2) Field component’lerini oluştur

Bunlar standart Angular component’leridir ve genelde şunları yapar:

• field instance’ını alır (TextboxField / TextareaField)
• ilgili FormControl’a bind eder

Projenizde field render için ortak bir base component varsa, input’ları ona göre uyarlayın.

Textbox component

textbox.component.ts

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

import { TextboxField } from './textbox.type';

@Component({
  selector: 'app-textbox',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `
    <label class="field">
      <span class="label">{{ field.label }}</span>
      <input
        class="input"
        [type]="field.type ?? 'text'"
        [placeholder]="field.placeholder ?? ''"
        [formControl]="control"
      />
    </label>
  `,
})
export class TextboxComponent {
  @Input({ required: true }) field!: TextboxField;
  @Input({ required: true }) control!: FormControl;
}

Textarea component

textarea.component.ts

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

import { TextareaField } from './textarea.type';

@Component({
  selector: 'app-textarea',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `
    <label class="field">
      <span class="label">{{ field.label }}</span>
      <textarea
        class="textarea"
        [rows]="field.minRowSize ?? 3"
        [placeholder]="field.placeholder ?? ''"
        [formControl]="control"
      ></textarea>
    </label>
  `,
})
export class TextareaComponent {
  @Input({ required: true }) field!: TextareaField;
  @Input({ required: true }) control!: FormControl;
}

3) NvsDynamicFormModule içinde register et

Field adlarını register edip her birini ilgili component + model class ile eşle.

app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';

import { NvsDynamicFormModule } from '@nvs-dynamic-form/ng-core';

import { TextboxComponent } from './components/fields/textbox/textbox.component';
import { TextboxField } from './components/fields/textbox/textbox.type';

import { TextareaComponent } from './components/fields/textarea/textarea.component';
import { TextareaField } from './components/fields/textarea/textarea.type';

import { ButtonComponent } from './components/button/button.component';

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(
      NvsDynamicFormModule.forRoot({
        formFields: {
          textbox: {
            component: TextboxComponent,
            class: TextboxField,
          },
          textarea: {
            component: TextareaComponent,
            class: TextareaField,
          },
        },
        submitButton: {
          component: ButtonComponent,
          defaultOptions: {
            label: 'Kaydet',
            isFullWidth: true,
            position: 'center',
            visible: true,
          },
        },
      }),
    ),
  ],
};

4) Formu bir sayfada örnekle

Bir sayfa/component oluşturup fields dizisini üret ve nvs-dynamic-form ile render et.

profile-form.page.ts

import { Component } from '@angular/core';
import { Validators } from '@angular/forms';

import { NvsDynamicFormModule } from '@nvs-dynamic-form/ng-core';

import { TextboxField } from '../components/fields/textbox/textbox.type';
import { TextareaField } from '../components/fields/textarea/textarea.type';

@Component({
  standalone: true,
  selector: 'app-profile-form-page',
  imports: [NvsDynamicFormModule],
  template: `
    <h1>Profil</h1>

    <nvs-dynamic-form
      [fields]="fields"
      submitButtonLabel="Kaydet"
      (onSubmit)="onSubmit($event)"
    ></nvs-dynamic-form>
  `,
})
export class ProfileFormPage {
  fields = [
    new TextboxField({
      label: 'Ad',
      key: 'firstName',
      placeholder: 'Jane',
      validators: [Validators.required],
      screenSize: { desktop: 6, mobile: 12 },
    }),
    new TextboxField({
      label: 'Soyad',
      key: 'lastName',
      placeholder: 'Doe',
      screenSize: { desktop: 6, mobile: 12 },
    }),
    new TextareaField({
      label: 'Hakkında',
      key: 'about',
      placeholder: 'Kendinden biraz bahset…',
      minRowSize: 6,
      screenSize: 12,
    }),
  ];

  onSubmit({ values, valid }: { values: any; valid: boolean }) {
    if (!valid) return;
    console.log(values);
  }
}