import { Component } from '@angular/core';
import { WrFormError, WrFormItem } from 'ngwr/form';
@Component({ imports: [WrFormError, WrFormItem] })
export class MyComponent {}Form
A plain layout wrapper for a label, a control and its error.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Which wrapper — item or field?
| Wrapper | Use it when |
|---|---|
<wr-form-field> | By default. It reads the control, shows its errors and wires the label. |
<wr-form-item> | You want the layout only. You set hasError and write the error yourself. |
Basic usage
<wr-form-item>
<label>Email</label>
<input wrInput type="email" [(ngModel)]="email" />
</wr-form-item>With error
[hasError] turns the label and input red; project the message as <wr-form-error>.
<wr-form-item [hasError]="invalid()">
<label>Email</label>
<input wrInput type="email" [(ngModel)]="email" />
<wr-form-error>Please enter a valid email.</wr-form-error>
</wr-form-item>Form Item API
| Name | Description | Type | Default |
|---|---|---|---|
hasError | Colour the label and input as an error. | boolean | false |
Form Error API
| Name | Description | Type | Default |
|---|---|---|---|
key | Validator key this message corresponds to (e.g. 'required'). Optional — without a key the message always renders, which is the plain inline-error usage inside <wr-form-item>. | string | — |
<wr-form-field> API — for reference
Also in ngwr/form; the examples are on its own page.
| Name | Description | Type | Default |
|---|---|---|---|
label | Label text shown above the control. | string | '' |
hint | Hint text shown below the control. Hidden when an error is visible. | string | '' |
required | Show a * next to the label. | boolean | false |
optional | Show an "optional" marker next to the label — the word comes from optionalLabel. Mutually exclusive with required. | boolean | false |
optionalLabel | Word inside the optional marker's parentheses. Falls back to form.optional, then 'optional'. The parentheses are the template's, so no locale has to repeat punctuation. | string | null | null |
controlId | Force a specific id on the label's for attribute. Auto-generated otherwise, and adopted by the projected wrInput unless that element already carries an id of its own. | string | `wr-form-field-${++uid}` |
autoErrors | Render a message for any error the markup does not already answer: the validator's own message, else validation.<key> from the app's i18n catalog. ngwr ships no error texts, so a key neither of them answers renders nothing, and dev mode warns once for it. On by default: a field with no <wr-form-error> at all is the common case. Turn it off for a field whose copy is entirely hand-written. | boolean | true |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/form's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-form-error-font-size | var(--wr-text-xs) | .wr-form-error |
--wr-form-error-line-height | var(--wr-text-xs-leading) | .wr-form-error |
--wr-form-field-error-font-size | var(--wr-text-sm) | .wr-form-field |
--wr-form-field-error-line-height | var(--wr-leading-tight) | .wr-form-field |
--wr-form-field-errors-gap | var(--wr-space-xs) | .wr-form-field |
--wr-form-field-font-family | var(--wr-font-family-base) | .wr-form-field |
--wr-form-field-gap | var(--wr-space-sm) | .wr-form-field |
--wr-form-field-hint-font-size | var(--wr-text-xs) | .wr-form-field |
--wr-form-field-hint-line-height | var(--wr-leading-tight) | .wr-form-field |
--wr-form-field-label-font-size | var(--wr-text-sm) | .wr-form-field |
--wr-form-field-label-font-weight | var(--wr-font-weight-medium) | .wr-form-field |
--wr-form-field-label-gap | var(--wr-space-xs) | .wr-form-field |
--wr-form-field-label-line-height | var(--wr-text-sm-leading) | .wr-form-field |
--wr-form-field-optional-font-size | var(--wr-text-sm) | .wr-form-field |
--wr-form-field-optional-font-weight | var(--wr-font-weight-regular) | .wr-form-field |
--wr-form-item-gap | var(--wr-space-sm) | .wr-form-item |
--wr-form-item-label-font-size | var(--wr-text-sm) | .wr-form-item |
--wr-form-item-label-font-weight | var(--wr-font-weight-medium) | .wr-form-item |
--wr-form-item-label-line-height | var(--wr-text-sm-leading) | .wr-form-item |
Dependencies
| Used by | Cascader, Checkbox, Color Picker, Date Picker, Editor, File Upload, Input, Input OTP, Knob, Radio, Rating, Schema Form, Segmented, Select, Slider, Switch, Textarea, Transfer, Tree |
|---|