Components

#HTML Code Example

<ng-absolute-validator  [formInstance]="<name>"></ng-absolute-validator>

#Custom Template

<ng-absolute-validator> renders three pieces of UI internally — the error message, the async-loading indicator, and (for the strength rule) the progress bar. Each can be swapped for your own markup by projecting an <ng-template> inside the component with a specific template reference variable.

Template ref	Replaces	Context variables
`#absError`	The default error message markup	`let-errors` — the raw list of validation error messages for this field (same data as `(errorsChange)`)
`#absLoader`	The default loading indicator shown while an async rule (`unique`, `exists`) is running	none
`#absProgress`	The default strength progress bar, used with the `strength` rule	`let-score` — the current strength score; `let-color="color"` — the color associated with that score

A quick note on the syntax difference in #absProgress: let-score (no ="...") binds to the template's implicit context value, while let-color="color" binds specifically to a named color property on that context — that's why one has the extra ="..." and the other doesn't.

<ng-absolute-validator [formInstance]="username">

	<!-- Custom error message markup -->
	<ng-template #absError let-errors>
		<p></p>
	</ng-template>

	<!-- Custom loading indicator, shown during async rules like unique/exists -->
	<ng-template #absLoader>
		Loading...
	</ng-template>

	<!-- Custom strength progress bar, used with the `strength` rule -->
	<ng-template #absProgress let-score let-color="color">
		<p>Score:  | Color: </p>
	</ng-template>

</ng-absolute-validator>

Providing any one of these templates overrides just that slot — supplying #absError or #absLoader should take over rendering automatically without also needing [showDefaultError]="false" or [showLoader]="false". Any slot left unprojected keeps using the library's default markup.

#Config Options

Property	Description	Example
`[formInstance]`	The control instance (`ngModel` or `formControl`) to validate and display messages for. Required on every `<ng-absolute-validator>`.	`[formInstance]="name"`
`[message]`	Overrides the default message for one or more rules on this field, passed as an object keyed by rule name.	`[message]="{required: 'This is a custom required message'}"`
`(onValid)`	Emits whenever the control's validity changes, with the current valid state.	`(onValid)="isValid($event)"`
`(onValidate)`	Emits the full list of raw validation error messages for the control.	`(onValidate)="getErrors($event)"`
`[loader]`	Set to `false` to disable the built-in loading indicator shown during async rules (e.g. `unique`, `exists`). Default: `true`.	`[loader]="false"`
`[defaultError]`	Set to `false` to disable the component's built-in error message rendering, so you can build fully custom error UI instead. Default: `true`.	`[defaultError]="false"`
`[showErrorOn]`	Controls which control state(s) trigger the error display. Accepts an array combining `touched`, `dirty`, `submit`, `always`. Default: `['touched', 'dirty']`.	`[showErrorOn]="['always']"`