# va-input

The following examples exercise the various inputs.
- `control` is the `FormControl` instance
- `placeholder` is the field label that floats when input is present
- `required` applies the required * (NOTE: This is *not* inferred from validators)
- `tooltip` is a tooltip
- `errorMessages` overrides the default messages for the validation type. A function can be provided that takes in the error.
    - Defaults are provided for: `required`, `minlength`, and `maxlength`

```html
<va-input [placeholder]="'Placeholder'" [required]="true" [control]="control1" [tooltip]="'default validators'"></va-input>
<va-input [placeholder]="'Placeholder 2'" [required]="true" [control]="control2" [tooltip]="'custom validators'" [errorMessages]="customErrorMessage"></va-input>
```

```typescript
class FormsInputDocComponent {
    ...
    public customErrorMessage: ErrorMessagesMap = {
      'required': 'Its required!!!!',
      'maxlength': (err: any) => {
        return `Hey, thats way more than ${err.requiredLength}`;
      },
    };
    ...
    constructor(..., private fb: FormBuilder) {
        this.control1 = this.fb.control('', [Validators.required, Validators.minLength(5), Validators.maxLength(10)]);
        this.control2 = this.fb.control('', [Validators.required, Validators.minLength(5), Validators.maxLength(10)]);
    }
}
```