FormGroup Decorator Library Documentation

Overview

This library provides a convenient way to transform TypeScript classes into Angular FormGroups using decorators. It simplifies form management by automatically creating FormControls from class properties and handling validation.

Installation

npm install jlf-typed-form-craft

Requirements

• Angular 19.0.0 or higher
• TypeScript 5.0.0 or higher

Features

Automatic FormGroup Generation

• Transform any class into a FormGroup using the @controlProp annotation
• Class properties are automatically converted into FormControls
• Supports nested forms and complex structures

Example:

1// Define your class with the decorator
2
3export class MyClass {
4  @controlProp({ defaultValue: '' })
5  firstField: string;
6
7  @controlProp({ defaultValue: false })
8  secondField: boolean;
9
10  @controlProp({ defaultValue: 0 })
11  anotherField: number;
12
13  fieldToIgnore: string;
14}
15
16// Usage in component
17export class CustomerComponent {
18  customerForm: FormGroup;
19
20  constructor() {
21    const model = new MyClass();
22    // Automatically creates a FormGroup with all FormControls (only decorated) 
23    // with default value set
24    this.customerForm = createFormFromClass<MyClass>(model);
25  }
26}

Built-in Validation

• Includes JlValidators for common validation scenarios
• Validators can be activated based on conditions
• Easy to combine multiple validators

Example:

1// Define your class with the decorator
2
3export class MyClass {
4  // add two validators
5  @controlProp({
6    validators: [Validators.required, Validators.maxLength(4)],
7    defaultValue: ''
8  })
9  firstField: string;
10
11  @controlProp({ defaultValue: '' })
12  secondField: boolean;
13
14  // added JlValidators with conditional expression.
15  @controlProp({
16    validators: [JlValidators.required((form: FormGroup) => form.get('firstField')?.value === 'test')]
17  })
18  anotherField: number;
19
20  fieldToIgnore: string;
21}

Other JlValidators available, working in the same way:

• minLength
• maxLength
• pattern
• email
• min
• max
• requiredTrue

Conditional Form Control Management

• Enable/disable form controls based on custom conditions
• Dynamic validation based on form state
• Reactive form control behavior

Example:

1// Define your class with the decorator
2
3export class MyClass {
4  @controlProp({
5    validators: [Validators.required, Validators.maxLength(4)],
6    defaultValue: ''
7  })
8  firstField: string;
9
10  // added disable control if firstField invalid
11  @controlProp({
12    defaultValue: '',
13    disable: (form: FormGroup) => form.get('firstField').invalid
14  })
15  secondField: boolean;
16
17  @controlProp({
18    validators: [JlValidators.required((form: FormGroup) => form.get('firstField')?.value === 'test')]
19  })
20  anotherField: number;
21
22  fieldToIgnore: string;
23}

Licence

MIT