@terminus/ui-validation-messages NPM

Installation

Packages that need to be installed

@angular/cdk
@angular/common
@angular/core
@angular/flex-layout
@angular/forms
@angular/material
@angular/platform-browser
@terminus/design-tokens
@terminus/fe-utilities
@terminus/ui-pipes
@terminus/ui-utilities
@terminus/ui-validation-messages
@terminus/ui-validators
date-fns

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-validation-messages

Modules that need to be in NgModule

TsValidationMessagesModule

CSS imports

In your top level stylesheet, add these imports:

@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';

CSS resources

Load the needed font families by adding this link to the <head> of your application:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">

Usage

This component was initially for internal use, but has been extended to support custom validation messages. Now a custom instance of this component can be passed in to override the existing validation messages.

<ts-validation-messages
  <!-- This should be the same FormControl passed to the outer form component -->
  [control]="myEmailControl"
  <!-- This is the function that will determine the messaging for errors -->
  [messagesFactory]="emailMessageFactory"
  <!-- This directive is needed to help the parent TsFormField find the custom messages -->
  tsCustomValidationMessage
></ts-validation-messages>

import { TsValidationMessageFactory } from '@terminus/ui-validation-messages';
...
emailMessageFactory: TsValidationMessageFactory = (a, b) => (a ? 'My custom message!' : null);

tslib @angular-devkit/schematics @schematics/angular

@zalastax/nolb-_ter @infinitebrahmanuniverse/nolb-_ter @everything-registry/sub-chunk-905

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago