Usage

After installing the package and registering NvsDynamicFormModule (see Installation), you can render forms with the nvs-dynamic-form component.

nvs-dynamic-form inputs/outputs

Name	Type	Kind	Description
fromClass	string	Input	CSS class name for the generated form.
validatorOrOpts	ValidatorFn | ValidatorFn[] | AbstractControlOptions	Input	Extra validators/options to apply to the underlying FormGroup.
submitButtonVisible	boolean	Input	Controls visibility of the submit button.
submitButtonLabel	string	Input	Submit button label.
submitButtonIsFullWidth	boolean	Input	Makes the submit button full width.
submitButtonPosition	'left' | 'right' | 'center'	Input	Submit button alignment.
fields	any[]	Input	The field definitions (instances of your field model classes).
onSubmit	EventEmitter<{ values: any; valid: boolean }>	Output	Fired when the form is submitted.

Simple example

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: 'First Name',
      key: 'firstName',
      placeholder: 'test',
      validators: [Validators.required],
      screenSize: {
        desktop: 6,
        mobile: 12,
      },
    }),
    new TextboxField({
      label: 'Last Name',
      key: 'lastName',
      screenSize: {
        desktop: 6,
        mobile: 12,
      },
    }),
    new TextboxField({
      label: 'E-mail Address',
      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>