Fix resource deployment text field validation (#12421) (#12457)

This commit is contained in:
Charles Gagnon
2020-09-18 11:22:23 -07:00
committed by GitHub
parent 681ecbd946
commit 7a1e0a7d2e

View File

@@ -117,7 +117,16 @@ interface ContextBase {
onNewInputComponentCreated: (name: string, inputComponentInfo: InputComponentInfo) => void;
}
export function createTextInput(view: azdata.ModelView, inputInfo: { defaultValue?: string, ariaLabel: string, required?: boolean, placeHolder?: string, width?: string, enabled?: boolean }): azdata.InputBoxComponent {
export function createTextInput(view: azdata.ModelView, inputInfo: {
defaultValue?: string,
ariaLabel: string,
required?: boolean,
placeHolder?: string,
width?: string,
enabled?: boolean,
validationRegex?: RegExp,
validationErrorMessage?: string
}): azdata.InputBoxComponent {
return view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
value: inputInfo.defaultValue,
ariaLabel: inputInfo.ariaLabel,
@@ -125,7 +134,13 @@ export function createTextInput(view: azdata.ModelView, inputInfo: { defaultValu
required: inputInfo.required,
placeHolder: inputInfo.placeHolder,
width: inputInfo.width,
enabled: inputInfo.enabled
enabled: inputInfo.enabled,
validationErrorMessage: inputInfo.validationErrorMessage
}).withValidation(component => {
if (inputInfo.validationRegex?.test(component.value || '') === false) {
return false;
}
return true;
}).component();
}
@@ -525,6 +540,7 @@ function processNumberField(context: FieldContext): void {
}
function processTextField(context: FieldContext): void {
let validationRegex: RegExp | undefined = context.fieldInfo.textValidationRequired ? new RegExp(context.fieldInfo.textValidationRegex!) : undefined;
const label = createLabel(context.view, { text: context.fieldInfo.label, description: context.fieldInfo.description, required: context.fieldInfo.required, width: context.fieldInfo.labelWidth, cssStyles: context.fieldInfo.labelCSSStyles });
const input = createTextInput(context.view, {
defaultValue: context.fieldInfo.defaultValue,
@@ -532,16 +548,16 @@ function processTextField(context: FieldContext): void {
required: context.fieldInfo.required,
placeHolder: context.fieldInfo.placeHolder,
width: context.fieldInfo.inputWidth,
enabled: context.fieldInfo.enabled
enabled: context.fieldInfo.enabled,
validationRegex: validationRegex,
validationErrorMessage: context.fieldInfo.textValidationDescription
});
context.onNewInputComponentCreated(context.fieldInfo.variableName!, { component: input });
addLabelInputPairToContainer(context.view, context.components, label, input, context.fieldInfo);
if (context.fieldInfo.textValidationRequired) {
let validationRegex: RegExp = new RegExp(context.fieldInfo.textValidationRegex!);
const removeInvalidInputMessage = (): void => {
if (validationRegex.test(input.value!)) { // input is valid
if (validationRegex!.test(input.value!)) { // input is valid
removeValidationMessage(context.container, context.fieldInfo.textValidationDescription!);
}
};
@@ -551,7 +567,7 @@ function processTextField(context: FieldContext): void {
}));
const inputValidator: Validator = (): { valid: boolean; message: string; } => {
const inputIsValid = validationRegex.test(input.value!);
const inputIsValid = validationRegex!.test(input.value!);
return { valid: inputIsValid, message: context.fieldInfo.textValidationDescription! };
};
context.onNewValidatorCreated(inputValidator);