TypedForms

Typed Forms for Angular 4+

Example TypedControl:

new TypedControl(
  '',
  [
    'required',
    ['minLength', 3],
    ['maxLength', 7],
    ({value}: TypedControl): ValidationErrors | null => value === 'John Doe' ? null : {customValidatorError: true}
  ],
  {
    required: "It's required",
    minlength: ({actualLength, requiredLength}) => `Required length: ${requiredLength}. Actual length: ${actualLength}`,
    customValidatorError: "You aren't John Doe"
  }
);

Example TypedBuilder:

constructor(private tb: TypedBuilder) {}

...

tb.create({
  name: [
    {value: '', disabled: false},
    ['required', ['min', 10], ['max', 15], ({value}: TypedControl) => value === 'Jonh' ? {customError: true} : null],
    {required: 'Validation message for require validator', customError: 'for custom error', $common: 'for min & max validators'}
  ]
});

In template:

<input type="text" [formControl]="myTypedControl">
<span class="form-control-error">{{myTypedControl.error}}</span>