aria-describedby passthrough for hint and error text — the same shape of gap as the name.
Accessible name for the control, for when no visible label exists. Prefer
AriaLabelledBy when one does — an aria-label duplicates that label's text and drifts
from it on rename. aria-labelledby beats aria-label where both are present.
The id of a VISIBLE label element that names this control — the preferred wiring whenever a label already exists on screen. It is also the only path that can name a control's SECONDARY pieces (a filter box, a toggle, a calendar) from that same label: see SecondaryLabelledBy.
Readonlyhostid for the control's focusable element, so other markup can REFERENCE it — aria-controls,
hint text, test hooks.
Whether it doubles as a <label for> target depends on the control, because label[for]
associates only with LABELABLE elements: it works on the input-backed controls (mj-combobox,
mj-numeric-input, mj-datepicker, mj-page-search) and on mj-switch, whose <button> is
labelable too. It does NOT work on mj-dropdown, whose trigger is a div[role=combobox] —
wiring label[for] there produces markup that looks correct, passes review, and leaves the
control named only in the browsers that guess. Each control's own docs say which it is.
ReadonlyNamedThis instance's id suffix, shared by every id the control generates.
aria-label for the calendar grid in the no-visible-label case.
aria-labelledby id list for the calendar grid when a VISIBLE label names the field.
Host-driven disable. Composed with Angular Forms' setDisabledState() into IsDisabled
(the actual gate) — see syncDisabled. A setter, not a bare field, because this input is
routinely bound to an expression that changes over the control's lifetime, and the gate has
to follow it every time.
aria-label for the toggle button in the no-visible-label case.
aria-labelledby id list for the toggle button when a VISIBLE label names the field.
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
Tab in the calendar closes it and returns to the field. The key is not cancelled, so the browser moves on from that field.
The callback function to register
Registers a callback function that is called when the control's value changes in the UI.
This method is called by the forms API on initialization to update the form model when values propagate from the view to the model.
When implementing the registerOnChange method in your own value accessor,
save the given function so your class calls it at the appropriate time.
The following example stores the provided function as an internal method.
registerOnChange(fn: (_: any) => void): void {
this._onChange = fn;
}
When the value changes in the UI, call the registered function to allow the forms API to update itself:
host: {
'(change)': '_onChange($event.target.value)'
}
The callback function to register
Registers a callback function that is called by the forms API on initialization to update the form model on blur.
When implementing registerOnTouched in your own value accessor, save the given
function so your class calls it when the control should be considered
blurred or "touched".
The following example stores the provided function as an internal method.
registerOnTouched(fn: any): void {
this._onTouched = fn;
}
On blur (or equivalent), your class should call the registered function to allow the forms API to update itself:
host: {
'(blur)': '_onTouched()'
}
aria-label for a secondary control in the no-visible-label case: word followed by the
host's own name, or fallback when the host has no name either.
The already-starts-with-word guard is not cosmetic: this repo's house habit is
AriaLabel="Filter roles", and an unconditional prefix announces that box as
"Filter Filter roles".
The match ends on a WORD BOUNDARY, not on a space: AriaLabel="Filter: roles" already begins
with the word and must not be prefixed either, while "Filters" is a different word and must
be. A space-only test gets the punctuated case wrong in the doubling direction.
aria-labelledby for a secondary control when a VISIBLE label names the host: the hidden word
plus that label's own text, composed by the accessibility tree from an id LIST. Empty when
there is no such label, in which case SecondaryLabel supplies a string instead.
An id list is the only mechanism that can work here — the component never sees the label's text, only its id. Without it, every filterable dropdown on a form named this way announces an identical "Filter options", and a form with six of them has six indistinguishable filter boxes.
Id of a hidden span holding one fixed WORD of a secondary control's name — "Filter", "Clear", "Open calendar for". Composed with the host's visible label by SecondaryLabelledBy.
mj-datepicker — Date picker with calendar popup. Replaces
<kendo-datepicker>.Without an accessible name the date field announces as "edit, blank" and its calendar popup as a generic "Calendar" — so a form with a start date and an end date presents two identical grids (WCAG 2.1 4.1.2). Use MJNamedControlBase.AriaLabelledBy when a visible label exists, MJNamedControlBase.AriaLabel when none does; the toggle button and the calendar take their names from the same source. The field is a real
<input>, so MJNamedControlBase.InputId IS a valid<label for>target.Example