Form-service-dynamic NPM

Installation

You can install the FormServiceDynamic package using npm:

npm install form-service-dynamic --save

Use in your component

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
import {FormServiceDynamic} from 'form-service-dynamic';

interface Person {
  name: string;
  age: number | null;
  phones: Phone[];
}

interface Phone {
  number: string | null;
  description: string | null;
  types: string[];
}

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  personForm!: FormGroup;

  constructor(private formService: FormServiceDynamic) {
  }

  ngOnInit(): void {
    this.createForm();
  }

  private createForm(): void {
    const person: Person = {
      name: '',
      age: null,
      phones: []
    };
    this.personForm = this.formService.createForm(person);
  }
}

Usage in Service

Import the necessary classes and interfaces from the @angular/forms module and the form-service package:

import {
  FormBuilder,
  FormGroup,
  FormControl,
  Validators,
  ValidatorFn,
  AsyncValidatorFn,
  AbstractControl
} from '@angular/forms';
import {FormServiceDynamic, FieldConfig} from 'form-service-dynamic';

Create an instance of FormServiceDynamic by injecting FormBuilder:

@Injectable({
  providedIn: 'root'
})
export class YourFormService extends FormServiceDynamic {
  constructor(private formBuilder: FormBuilder) {
    super(formBuilder);
  }

  // Your custom form creation methods can go here
}

Define your form configuration using the CampoConfig interface:

interface Phone {
  number: string | null;
  description: string | null;
  types: string[];
}

interface Person {
  name: string | null;
  age: number | null;
  phones: Phone[];
}

const phone: Phone = {
  number: '',
  description: '',
  types: []
};

const person: Person = {
  name: '',
  age: null,
  phones: [phone]
};

Use the createForm method from FormServiceDynamic to generate the form:

const options: { [field: string]: CampoConfig } = {
  name: {value: '', validations: {required: true}},
  age: {value: null, validations: {required: true, min: 18}},
  phones: {value: [], validations: {required: true}}
};

const personForm: FormGroup = this.createForm(person, options);

Use the generated form in your component template:

<form [formGroup]="personForm">
  <label for="name">Name:</label>
  <input type="text" id="name" formControlName="name">
  <!-- More form controls for other fields... -->
</form>

Custom Validators

const options: { [field: string]: CampoConfig } = {
  name: {
    value: '',
    customValidation: (control: AbstractControl) => {
      if (control.value && control.value.toLowerCase() === 'admin') {
        return {forbiddenName: true};
      }
      return null;
    }
  },
// Other fields...
};