Add validation error message for inputbox component (#8909)

* add validation error message for inputbox component

* addressing comments

* remove copying entire definition for InputBoxProperties
This commit is contained in:
Kim Santiago
2020-01-24 11:38:49 -08:00
committed by GitHub
parent 7e0c7e35a1
commit 9e61c468d1
8 changed files with 112 additions and 21 deletions

View File

@@ -158,12 +158,16 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
public validate(): Thenable<boolean> {
return super.validate().then(valid => {
const otherErrorMsg = valid || this.inputElement.value === '' ? undefined : this.validationErrorMessage;
valid = valid && this.inputElement.validate();
// set aria label based on validity of input
if (valid) {
this.inputElement.setAriaLabel(this.ariaLabel);
} else {
if (otherErrorMsg) {
this.inputElement.showMessage({ type: MessageType.ERROR, content: otherErrorMsg }, true);
}
if (this.ariaLabel) {
this.inputElement.setAriaLabel(nls.localize('period', "{0}. {1}", this.ariaLabel, this.inputElement.inputElement.validationMessage));
} else {
@@ -329,4 +333,12 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
public focus(): void {
this.inputElement.focus();
}
public get validationErrorMessage(): string {
return this.getPropertyOrDefault<azdata.InputBoxProperties, string>((props) => props.validationErrorMessage, '');
}
public set validationErrorMessage(newValue: string) {
this.setPropertyFromUI<azdata.InputBoxProperties, string>((props, value) => props.validationErrorMessage = value, newValue);
}
}