ngx-bean-validation/README.md

> Idea was taken from [Bean Validation](https://beanvalidation.org/)

# NgxBeanValidation

> Idea was taken from [Bean Validation](https://beanvalidation.org/)

1. [Supports](#supports)
2. [Install](#install)
3. [What is the problem?](#what-is-the-problem)
4. [Contains](#contains)
5. [Does not support](#does-not-support)
6. [Contributing](#contribution)

## Supports
From Angular 5.

## Install
Install with npm

`npm install ngx-bean-validation --save-dev`

## What is the problem?

Reactive forms are very powerful, but they become painful for big forms:
```typescript
class Component {
  private userForm: FormGroup = this.formBuilder.group({
      email: ['', Validators.compose([Validators.required, Validators.email])],
      name: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(40)])],
      age: ['', Validators.compose([Validators.number, Validators.min(18), Validators.max(60)])],
      creditCards: [{
          cardNumber: ['', Validators.compose(Validators.isCreditCard, Validators.isMasterCard)],
          date: ['', Validators.compose([Validators.required, Validators.pattern(/^(0[1-9]|1[0-2])\/?([0-9]{4}|[0-9]{2})$/)])],
          cvv: ['', Validators.compose([Validators.required, Validators.pattern(/^[0-9]{3,4}$/)])]
      }],
      address: {
          addressLine1: ['', Validators.required],
          addressLine2: '',
          city: ['', Validators.required],
          region: ['', Validators.required],
          zip: ['', Validators.compose([Validators.required, Validators.pattern(/^\d{5}(?:[-\s]\d{4})?$/)])],
          country: ['', Validators.required]
      },
      deliveryDate: ['', Validators.compose([Validators.required, Validators.isDate, Validators.dateBefore(someValue), Validators.dateAfter(someValue)])]
  });
}
```

instead of this huge unreadable peace of code, I recommend using Bean Validation approach
```typescript
class User {
    @Email()
    @Required()
    email: string;
 
    @MaxLength(40)
    @MinLength(3)
    @Required()
    name: string;
 
    @Max(60)
    @Min(18)
    @Number()
    @Required()
    age: number;
 
    @NestedArray()
    creditCards: CreditCard[] = [new CreditCard()];
 
    @Nested()
    address: Address = new Address();
 
    @DateAfter(new Date())
    @DateBefore(new Date())
    @IsDate()
    @Required()
    deliveryDate: string;
}
 
class CreditCard {
    @IsMasterCard()
    @IsCreditCard()
    @Required()
    cardNumber: string;
 
    @Pattern(/^(0[1-9]|1[0-2])\/?([0-9]{4}|[0-9]{2})$/)
    @Required()
    date: string;
 
    @Pattern(/^[0-9]{3,4}$/)
    @Required()
    cvv: string;
}
 
class Address {
    @Required()
    addressLine1: string;
 
    @EmptyControl()
    @Required()
    addressLine2: string;
 
    @Required()
    city: string;
 
    @Required()
    region: string;
 
    @Pattern(/^\d{5}(?:[-\s]\d{4})?$/)
    @Required()
    zip: string;
 
    @Required()
    country: string;
}

class Component {
  private userForm: FormGroup = new BeanFormGroup<User>(new User());
}
``` 

Now we can use our classes as interface and reuse them for reactive forms.

## Contains:

This library provides `BeanFormGroup` class for creation `FormGroup` from annotated classes.

### Annotations for default angular validators:
* Email
* Max
* MaxLength
* Min
* MinLength
* Required
* RequiredTrue
* Pattern

### Annotation for empty form control:
* EmptyControl

### Annotation for nested FormGroup and FormArray:
* Nested
* NestedArray

### Annotation for disabling form control:
* Disabled

### Function that helps you create your own validator annotation:
* setSyncValidator

## How to use:
Example how to create your own validator annotation:
```typescript
import {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms';
import {setSyncValidator, AnnotationFunction} from 'ngx-bean-validation';

const customAngularValidator = (someValue: any): ValidatorFn => {
  return (control: AbstractControl): ValidationErrors => {
    return {
      custom: 'Custom validator'
    };
  };
};

export const CustomValidator = (someValue: any): AnnotationFunction => (target: object, key: string): void => {
  setSyncValidator(target, key, customAngularValidator(someValue));
};
```

Now you can put it in your class:
```typescript
import {CustomValidator} from './custom-validator';

class User {
  @CustomValidator('someValue')
  name: string
}
```

And create form group:
```typescript
import {FromGroup} from '@angular/forms';
import {User} from './user';
import {BeanFormGroup} from 'ngx-bean-validation';

class Component {
  userForm: FromGroup = new BeanFormGroup(new User())
}
```

## Does not support
* Async validators
* FormControl and FormArray them self, only inside FormGroup

## Contribution
Are very welcome! Please share your ideas and improvements.