mirror of
https://github.com/bitwarden/web
synced 2025-12-06 00:03:28 +00:00
06e1af6d48
* Break form controls up into reusable components * Add proper form styling, validation, inline error messages, etc * Move control options into class instead of template * Add accessibility
34 lines
1.0 KiB
HTML
34 lines
1.0 KiB
HTML
<div class="form-group">
|
|
<label [attr.for]="controlId">
|
|
{{ label }}
|
|
<small *ngIf="isRequired" class="text-muted form-text d-inline"
|
|
>({{ "required" | i18n }})</small
|
|
>
|
|
</label>
|
|
<input
|
|
[formControl]="internalControl"
|
|
class="form-control"
|
|
[attr.id]="controlId"
|
|
[attr.aria-describedby]="describedById"
|
|
[attr.aria-invalid]="controlDir.control.invalid"
|
|
(blur)="onBlurInternal()"
|
|
/>
|
|
<div *ngIf="showDescribedBy" [attr.id]="describedById">
|
|
<small
|
|
*ngIf="helperText != null && !controlDir.control.hasError(helperTextSameAsError)"
|
|
class="form-text text-muted"
|
|
>
|
|
{{ helperText }}
|
|
</small>
|
|
<small class="error-inline" *ngIf="controlDir.control.hasError('required')" role="alert">
|
|
<i class="bwi bwi-exclamation-circle" aria-hidden="true"></i>
|
|
<span class="sr-only">{{ "error" | i18n }}:</span>
|
|
{{
|
|
controlDir.control.hasError(helperTextSameAsError)
|
|
? helperText
|
|
: ("fieldRequiredError" | i18n: label)
|
|
}}
|
|
</small>
|
|
</div>
|
|
</div>
|