Kullanım

Paketi kurup NvsDynamicFormModule’ü register ettikten sonra (bkz. Kurulum), formlarınızı nvs-dynamic-form component’i ile render edebilirsiniz.

nvs-dynamic-form input/output’ları

İsim	Tip	Tür	Açıklama
fromClass	string	Input	Oluşturulan form için CSS class adı.
validatorOrOpts	ValidatorFn | ValidatorFn[] | AbstractControlOptions	Input	Alttaki FormGroup’a ekstra validator/opsiyon eklemek için.
submitButtonVisible	boolean	Input	Submit butonunun görünürlüğü.
submitButtonLabel	string	Input	Submit butonu label’ı.
submitButtonIsFullWidth	boolean	Input	Submit butonunu tam genişlik yapar.
submitButtonPosition	'left' | 'right' | 'center'	Input	Submit butonu hizası.
fields	any[]	Input	Field tanımları (field model class instance’ları).
onSubmit	EventEmitter<{ values: any; valid: boolean }>	Output	Form submit olduğunda tetiklenir.

Basit örnek

app.component.ts

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

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

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  imports: [NvsDynamicFormModule],
})
export class AppComponent {
  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 TextboxField({
      label: 'E-posta',
      key: 'emailAddress',
      screenSize: 12,
    }),
  ];

  onSubmit({ values, valid }: { values: any; valid: boolean }) {
    if (valid) {
      alert(JSON.stringify(values));
    }
  }
}

app.component.html

<nvs-dynamic-form [fields]="fields" (onSubmit)="onSubmit($event)"></nvs-dynamic-form>