mirror of
https://github.com/bitwarden/web
synced 2025-12-06 00:03:28 +00:00
* 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
69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import { Directive, Input, OnInit, Self } from "@angular/core";
|
|
import { ControlValueAccessor, FormControl, NgControl, Validators } from "@angular/forms";
|
|
|
|
import { dirtyRequired } from "jslib-angular/validators/dirty.validator";
|
|
|
|
/** For use in the SSO Config Form only - will be deprecated by the Component Library */
|
|
@Directive()
|
|
export abstract class BaseCvaComponent implements ControlValueAccessor, OnInit {
|
|
get describedById() {
|
|
return this.showDescribedBy ? this.controlId + "Desc" : null;
|
|
}
|
|
|
|
get showDescribedBy() {
|
|
return this.helperText != null || this.controlDir.control.hasError("required");
|
|
}
|
|
|
|
get isRequired() {
|
|
return (
|
|
this.controlDir.control.hasValidator(Validators.required) ||
|
|
this.controlDir.control.hasValidator(dirtyRequired)
|
|
);
|
|
}
|
|
|
|
@Input() label: string;
|
|
@Input() controlId: string;
|
|
@Input() helperText: string;
|
|
|
|
internalControl = new FormControl("");
|
|
|
|
protected onChange: any;
|
|
protected onTouched: any;
|
|
|
|
constructor(@Self() public controlDir: NgControl) {
|
|
this.controlDir.valueAccessor = this;
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.internalControl.valueChanges.subscribe(this.onValueChangesInternal);
|
|
}
|
|
|
|
onBlurInternal() {
|
|
this.onTouched();
|
|
}
|
|
|
|
// CVA interfaces
|
|
writeValue(value: string) {
|
|
this.internalControl.setValue(value);
|
|
}
|
|
|
|
registerOnChange(fn: any) {
|
|
this.onChange = fn;
|
|
}
|
|
|
|
registerOnTouched(fn: any) {
|
|
this.onTouched = fn;
|
|
}
|
|
|
|
setDisabledState(isDisabled: boolean) {
|
|
if (isDisabled) {
|
|
this.internalControl.disable();
|
|
} else {
|
|
this.internalControl.enable();
|
|
}
|
|
}
|
|
|
|
protected onValueChangesInternal: any = (value: string) => this.onChange(value);
|
|
// End CVA interfaces
|
|
}
|