diff --git a/extensions/resource-deployment/src/ui/modelViewUtils.ts b/extensions/resource-deployment/src/ui/modelViewUtils.ts index fc6708bd7f..cf4d6fe3de 100644 --- a/extensions/resource-deployment/src/ui/modelViewUtils.ts +++ b/extensions/resource-deployment/src/ui/modelViewUtils.ts @@ -105,9 +105,10 @@ export function createNumberInput(view: azdata.ModelView, info: { defaultValue?: }).component(); } -export function createCheckbox(view: azdata.ModelView, info: { initialValue: boolean, label: string }): azdata.CheckBoxComponent { +export function createCheckbox(view: azdata.ModelView, info: { initialValue: boolean, label: string, required?: boolean }): azdata.CheckBoxComponent { return view.modelBuilder.checkBox().withProperties({ checked: info.initialValue, + required: info.required, label: info.label }).component(); } @@ -119,6 +120,7 @@ export function createDropdown(view: azdata.ModelView, info: { defaultValue?: st width: info.width, editable: info.editable, fireOnTextChange: true, + required: info.required, ariaLabel: info.label }).component(); } @@ -420,7 +422,7 @@ function processReadonlyTextField(context: FieldContext): void { } function processCheckboxField(context: FieldContext): void { - const checkbox = createCheckbox(context.view, { initialValue: context.fieldInfo.defaultValue! === 'true', label: context.fieldInfo.label }); + const checkbox = createCheckbox(context.view, { initialValue: context.fieldInfo.defaultValue! === 'true', label: context.fieldInfo.label, required: context.fieldInfo.required }); context.components.push(checkbox); context.onNewInputComponentCreated(context.fieldInfo.variableName!, checkbox); } diff --git a/src/sql/workbench/browser/modelComponents/checkbox.component.ts b/src/sql/workbench/browser/modelComponents/checkbox.component.ts index bfc1abddd6..4ba232f026 100644 --- a/src/sql/workbench/browser/modelComponents/checkbox.component.ts +++ b/src/sql/workbench/browser/modelComponents/checkbox.component.ts @@ -32,7 +32,7 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone constructor( @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService, - @Inject(forwardRef(() => ElementRef)) el: ElementRef,) { + @Inject(forwardRef(() => ElementRef)) el: ElementRef) { super(changeRef, el); } @@ -50,14 +50,16 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone this._input = new Checkbox(this._inputContainer.nativeElement, inputOptions); this._register(this._input); - this._register(this._input.onChange(e => { + this._register(this._input.onChange(async e => { this.checked = this._input.checked; + await this.validate(); this.fireEvent({ eventType: ComponentEventType.onDidChange, args: e }); })); this._register(attachCheckboxStyler(this._input, this.themeService)); + this._validations.push(() => !this.required || this.checked); } } @@ -93,6 +95,7 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone if (this.required) { this._input.required = this.required; } + this.validate(); } // CSS-bound properties diff --git a/src/sql/workbench/browser/modelComponents/dropdown.component.ts b/src/sql/workbench/browser/modelComponents/dropdown.component.ts index d82538247b..f82f41cc25 100644 --- a/src/sql/workbench/browser/modelComponents/dropdown.component.ts +++ b/src/sql/workbench/browser/modelComponents/dropdown.component.ts @@ -74,30 +74,34 @@ export default class DropDownComponent extends ComponentBase implements ICompone this._register(this._editableDropdown); this._register(attachEditableDropdownStyler(this._editableDropdown, this.themeService)); - this._register(this._editableDropdown.onValueChange(e => { + this._register(this._editableDropdown.onValueChange(async e => { if (this.editable) { this.setSelectedValue(this._editableDropdown.value); + await this.validate(); this.fireEvent({ eventType: ComponentEventType.onDidChange, args: e }); } })); + this._validations.push(() => !this.required || !this.editable || !!this._editableDropdown.value); } if (this._dropDownContainer) { this._selectBox = new SelectBox(this.getValues(), this.getSelectedValue(), this.contextViewService, this._dropDownContainer.nativeElement); this._selectBox.render(this._dropDownContainer.nativeElement); this._register(this._selectBox); this._register(attachSelectBoxStyler(this._selectBox, this.themeService)); - this._register(this._selectBox.onDidSelect(e => { + this._register(this._selectBox.onDidSelect(async e => { if (!this.editable) { this.setSelectedValue(this._selectBox.value); + await this.validate(); this.fireEvent({ eventType: ComponentEventType.onDidChange, args: e }); } })); + this._validations.push(() => !this.required || this.editable || !!this._selectBox.value); } } @@ -139,6 +143,7 @@ export default class DropDownComponent extends ComponentBase implements ICompone this._selectBox.selectElem.required = this.required; this._editableDropdown.inputElement.required = this.required; + this.validate(); } private getValues(): string[] {