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

<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>

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)]);
    }
}