A dynamic form creation service for Angular applications.
npm install form-service-dynamic
The FormServiceDynamic is a utility library for creating Angular forms with ease. It provides a simple way to generate
reactive forms and apply validations to form controls.
Report bug
ยท
Request feature
![GitHub top language]()
![GitHub code size in bytes]()
![GitHub issues]()
![GitHub closed issues]()
![GitHub contributors]()

![npm]()

You can install the FormServiceDynamic package using npm:
``bash`
npm install form-service-dynamic --save
`typescript
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);
}
}
`
1. Import the necessary classes and interfaces from the @angular/forms module and the form-service package:
`typescript`
import {
FormBuilder,
FormGroup,
FormControl,
Validators,
ValidatorFn,
AsyncValidatorFn,
AbstractControl
} from '@angular/forms';
import {FormServiceDynamic, FieldConfig} from 'form-service-dynamic';
2. Create an instance of FormServiceDynamic by injecting FormBuilder:
`typescript
@Injectable({
providedIn: 'root'
})
export class YourFormService extends FormServiceDynamic {
constructor(private formBuilder: FormBuilder) {
super(formBuilder);
}
// Your custom form creation methods can go here
}
`
3. Define your form configuration using the CampoConfig interface:
`typescript
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]
};
`
4. Use the createForm method from FormServiceDynamic to generate the form:
`typescript
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);
`
5. Use the generated form in your component template:
`html
6. Custom Validators
`typescript
const options: { [field: string]: CampoConfig } = {
name: {
value: '',
customValidation: (control: AbstractControl) => {
if (control.value && control.value.toLowerCase() === 'admin') {
return {forbiddenName: true};
}
return null;
}
},
// Other fields...
};
`Help improve
Found a bug or a problem? Open a new issue GitHub.
Contributing to this project
Author
@JeanPaul โ jeanpaulwebb@gmail.com
License
This project is licensed under the MIT License - see the LICENSE file for details.
Come and contribute to this library, I'm waiting for you ๐
$3
This library was generated with version 16.2.0.
Code scaffolding
Run
ng generate component component-name --project form-service-dynamic to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project form-service-dynamic.
> Note: Don't forget to add --project form-service-dynamic or else it will be added to the default project in your angular.json file.Build
Run
ng build form-service-dynamic to build the project. The build artifacts will be stored in the dist/ directory.Publishing
After building your library with
ng build form-service-dynamic, go to the dist folder cd dist/form-service-dynamic and run npm publish.Obs: All version publications will be made by me, after approval by your MR
Running unit tests
Run
ng test form-service-dynamic` to execute the unit tests via Karma.