JSON validation for user_args field

This commit is contained in:
shamoon 2023-12-21 11:05:01 -08:00
parent 634f3cee0f
commit cf0dc73eb3
3 changed files with 37 additions and 6 deletions

View File

@ -25,10 +25,10 @@
</div>
<div class="mb-n3">
@switch (option.type) {
@case (ConfigOptionType.Select) { <pngx-input-select [formControlName]="option.key" [items]="option.choices" [allowNull]="true"></pngx-input-select> }
@case (ConfigOptionType.Number) { <pngx-input-number [formControlName]="option.key" [showAdd]="false"></pngx-input-number> }
@case (ConfigOptionType.Boolean) { <pngx-input-switch [formControlName]="option.key" title="Enable" i18n-title></pngx-input-switch> }
@case (ConfigOptionType.String) { <pngx-input-text [formControlName]="option.key"></pngx-input-text> }
@case (ConfigOptionType.Select) { <pngx-input-select [formControlName]="option.key" [error]="errors[option.key]" [items]="option.choices" [allowNull]="true"></pngx-input-select> }
@case (ConfigOptionType.Number) { <pngx-input-number [formControlName]="option.key" [error]="errors[option.key]" [showAdd]="false"></pngx-input-number> }
@case (ConfigOptionType.Boolean) { <pngx-input-switch [formControlName]="option.key" [error]="errors[option.key]" title="Enable" i18n-title></pngx-input-switch> }
@case (ConfigOptionType.String) { <pngx-input-text [formControlName]="option.key" [error]="errors[option.key]"></pngx-input-text> }
}
</div>
</div>
@ -47,7 +47,7 @@
<button type="button" (click)="discardChanges()" class="btn btn-secondary" [disabled]="loading || (isDirty$ | async) === false" i18n>Discard</button>
</div>
<div class="btn-group">
<button type="submit" class="btn btn-primary" [disabled]="loading || (isDirty$ | async) === false" i18n>Save</button>
<button type="submit" class="btn btn-primary" [disabled]="loading || !configForm.valid || (isDirty$ | async) === false" i18n>Save</button>
</div>
</div>
</form>

View File

@ -93,4 +93,11 @@ describe('ConfigComponent', () => {
OutputTypeConfig.PDF_A2
)
})
it('should support JSON validation for e.g. user_args', () => {
component.configForm.get('user_args').patchValue('{ foo bar }')
expect(component.errors).toEqual({ user_args: 'Invalid JSON' })
component.configForm.get('user_args').patchValue('{ "foo": "bar" }')
expect(component.errors).toEqual({ user_args: null })
})
})

View File

@ -1,5 +1,5 @@
import { Component, OnDestroy, OnInit } from '@angular/core'
import { FormControl, FormGroup } from '@angular/forms'
import { AbstractControl, FormControl, FormGroup } from '@angular/forms'
import {
BehaviorSubject,
Observable,
@ -48,6 +48,8 @@ export class ConfigComponent
user_args: new FormControl(),
})
public errors = {}
get optionCategories(): string[] {
return Object.values(ConfigCategory)
}
@ -87,6 +89,28 @@ export class ConfigComponent
this.toastService.showError($localize`Error retrieving config`, e)
},
})
// validate JSON input for user_args
this.configForm
.get('user_args')
.addValidators((control: AbstractControl) => {
if (!control.value || control.value.toString().length === 0) return null
try {
JSON.parse(control.value)
} catch (e) {
return [
{
user_args: e,
},
]
}
return null
})
this.configForm.get('user_args').statusChanges.subscribe((status) => {
this.errors['user_args'] =
status === 'INVALID' ? $localize`Invalid JSON` : null
})
this.configForm.get('user_args').updateValueAndValidity()
}
ngOnDestroy(): void {