schema = {
"roomNo" : {
"type" : "array",
"items" :{
"type" : "string",
"minLength" : 1
}
}
}
i have the above schema and it's generate ui takes a place of table same as array and sometimes the data is not present then it dosent comes with input
I want to have a input ui instead of array renderer and it should always go to the index of array[0] for data
so that the input appears even if there's no dataHi @Pranjal,
By implementing a custom renderer for tables you can easily provide the desired behavior.
1 Like
I did try that. it was giving me validation errors for the input stating Input required is araay. it wasnt taking string ill try to make a working sandbox that should help. I was about to give up on this let me check once more
Also thanks for replying
Yes that would be great!
Hello @sdirix,
Please check the below attached csb
In this i am able to update the value but the errors are not getting updated in ui though i can see ajv errors when logged in console
For updating the data I had to do like this
this.jsonFormsService.updateCore(Actions.update(${pathSelect}.0, () => event.target.value);
What should i do to update the errors in ui for example when there are no charachters or stirng in the ui it gives error in ajv but not in jsonforms ui?
When i dont change the pathSelect and keep it like this below at that time i can see errors in ui but it says should be array
this.jsonFormsService.updateCore(Actions.update(pathSelect, () => event.target.value);
FYI this is how my data is
roomNo: [""]
I can see the value getting prefilled properly but when i change something it’s not getting properly validated
Yeah i didnt set the whole thing as i am using 2.5.2 i had to setit up again
hi @sdirix
i’ve went ahead and again created a csb link for you now this time by forking your own repository and still it has dependency issues . anyways please check the file i have updated it in a better manner now
I took a look at the code:
I think you can simplify a lot by not extending JsonFormsArrayControl but just the regular TextControlRenderer or even just the JsonFormsControl.
You can take a look at the text control renderer provided by the renderer set. The input is controled by form which is created in the base class here and updated here.
You can simply create such a form control too, but instead of setting the value to data you set it to data[0] || '' and in onChange you use
`${this.propsPath}.0`
instead of this.propsPath
I did the above mentioned changes like the below
form : FormControl;
constructor(jsonformsService: JsonFormsAngularService,
private changeDetector: ChangeDetectorRef) {
super(jsonformsService);
this.form = new FormControl(
{
value: '',
disabled: true
},
{
updateOn: 'change',
validators: this.validator.bind(this)
}
);
}
ngOnInit(): void {
super.ngOnInit();
this.jsonFormsService.$state.subscribe({
next: (state) => {
const props = this.mapToProps(state);
const { data, enabled, errors, label, required,schema, rootSchema, visible, path,config } = props;
this.data = data;
this.error = errors;
this.enabled = enabled;
this.isEnabled() ? this.form.enable() : this.form.disable();
this.hidden = !visible;
this.scopedSchema = rootSchema;
this.description = this.scopedSchema !== undefined ? this.scopedSchema.description : '';
this.id = props.id;
this.form.setValue(data[0] || '');
this.propsPath = path;
this.mapAdditionalProps(props);
}
})
this.triggerValidation();
}
onChange(ev: any): void {
this.jsonFormsService.updateCore(Actions.update(`${this.propsPath}.0`, () => ev.target.value));
this.triggerValidation();
}
validator: ValidatorFn = (_c : AbstractControl) : ValidationErrors | null => {
return this.error ? { 'error': this.error } : null;
}
protected triggerValidation(): void {
this.form.updateValueAndValidity();
this.form.markAsTouched();
}
And when i logged this.errors it’s coming as empty which shouldnt be the case if my input is empty it should have validation error stating length greaeter than 1 or required property which is not happening and in my view thus it’s not getting rendered in ui.
In ajv it’s working fine i can see the errors for it in console but from component it’s not happening properly
In your schema only the array itself is required, not the string content of the array. How is your renderer registered?
Thanks for Replying @sdirix
This is how i’ve kept required field for the input and my tester looks like this
const inputTester : Tester = and(
schemaTypeIs(‘array’),
scopeEndsWith(‘roomNo’)
)
export const roomNoTester : RankedTester = rankWith
(9, inputTester);
schema = {
"roomNo" : {
"type" : "array",
"items" :{
"type" : "string",
"minLength" : 1
}
},
"required": ["roomNo"]
}The schema is not valid, the schema should look like this:
{
"type": "object",
"properties": {
"roomNo": {
"type": "array",
"items": {
"type": "string",
"minLength": 1
}
}
},
"required": [
"roomNo"
]
}
Yeah it is like that only i just gaved you the main content
{
"definitions": {
"order": {
"type": "object",
"properties": {
"roomNo": {
"type": "array",
"items": {
"type": "string",
"minLength": 1
}
}
}
}
},
"type": "object",
"properties": {
"orders": {
"type": "array",
"items": {
"$ref": "#/definitions/order"
}
}
},
"required": ["title"]
}
{
"type": "Categorization",
"elements": [
{
"type": "Category",
"label": "Orders",
"elements": [
{
"type": "ListWithDetail",
"scope": "#/properties/orders",
"options": {
"labelRef": "#/items/properties/customer/properties/name",
"detail": {
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/roomNo",
"options": {
"hideLabel": true
}
}
]
}
}
}
]
}
]
}
I see, but there is no required in the schema which you posted, so there can also be no required validation error.
I’m really tired with this library and building and providing every inputs. please check the above ive fixed and give me the solution i am really not getting help on this and ive tried various things on my own and whatever you have suggested just dosent work.
{
"definitions": {
"order": {
"type": "object",
"properties": {
"roomNo": {
"type": "array",
"items": {
"type": "string",
"minLength": 1
}
}
},
"required": [
"roomNo"
]
}
},
"type": "object",
"properties": {
"orders": {
"type": "array",
"items": {
"$ref": "#/definitions/order"
}
}
}
}
And again if you see any errors if anything is inperfect please assume that this is a required field and above csb links works fine in my local and in this chat you can find the solution which you provided which dosent help. it will be more helpfull if you can create a csb which is too much to ask for but i am really not sure how am i suppose to match your answer