added json-validated textfield for complexType

This commit is contained in:
Maria Teresa Paratore 2024-06-20 13:08:48 +02:00
parent 05a1d916bf
commit 8518810d34
2 changed files with 64 additions and 20 deletions

View File

@ -19,7 +19,7 @@
<div formArrayName="{{facetTemplate.key}}" *ngFor="let facetTemplate of fieldsMap|keyvalue;" >
<div [formGroupName] ="ind" *ngFor="let fct of (getSingleFacetArray(facetTemplate.key)).controls; let ind=index;" style="border: 3px solid rgb(72, 157, 202); padding: 10px; margin: 5px;">
<mat-form-field appearance="outline" >
<input matInput formControlName="facetName" [style.width.px]="350" type="text" [readonly]="true" style="font-size: large; font-weight: 700;" />
<input matInput formControlName="facetName" style="width: 350px" type="text" [readonly]="true" style="font-size: large; font-weight: 700;" />
</mat-form-field>
<mat-form-field>
<mat-label for="min" >occurr. min</mat-label>
@ -105,6 +105,11 @@
<input matInput formControlName="val" type="number"/>
<mat-error>{{checkForErrorsIn(facetTemplate.key,ind,i,'number')}}</mat-error>
</mat-form-field>
<mat-form-field *ngIf="x.get('tipo')?.value === 'complexType'">
<mat-label for="val">value</mat-label>
<textarea matInput style="width: 400px" formControlName="val"></textarea>
<mat-error>{{checkForErrorsIn(facetTemplate.key,ind,i,'complexType')}}</mat-error>
</mat-form-field >
<mat-form-field *ngIf="x.get('tipo')?.value === 'boolean'">
<mat-label for="val">value</mat-label>
<input matInput formControlName="val" type="boolean"/>

View File

@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable no-labels */
/* eslint-disable no-useless-escape */
@ -20,7 +21,6 @@ import { MatExpansionModule } from '@angular/material/expansion';
import { IFacetComposer, IFacetProps } from './i-facet-composer';
import { SharedModule } from 'app/shared/shared.module';
import { MatSelectFilterModule } from 'mat-select-filter';
import { isEmpty } from 'rxjs';
@Component({
standalone: true,
@ -79,6 +79,7 @@ export class FacetComposerComponent implements OnInit {
optionTypes = [
{ value: 'boolean'},
{ value: 'complexType'},
{ value: 'date'},//text
{ value: 'datetime'},//text
{ value: 'password'},
@ -174,6 +175,11 @@ defaultValue={new Date().toISOString().substring(0, (new Date().toISOString().in
// eslint-disable-next-line no-useless-escape
valFc.setValidators([Validators.required,Validators.pattern('^\s*(true|false)\s*$')]);
}
if(newValue==='complexType'){
valFc.setValue('{}');
// eslint-disable-next-line no-useless-escape
valFc.setValidators([Validators.required, this.validateJsonString()]);
}
if(newValue==='datetime'){
valFc.setValue('');
valFc.setValue(new Date().toISOString());
@ -206,10 +212,19 @@ defaultValue={new Date().toISOString().substring(0, (new Date().toISOString().in
const value = control.value;
const isFormallyCorrect = /^(19|20)\d{2}-(0[1-9]|1[0,1,2])-(0[1-9]|[12][0-9]|3[01])T(0[0-9]|1[0-9]|2[0-4]):(0[0-9]|[1-5][0-9]):(0[0-9]|[1-5][0-9])\.[0-9]{3}Z$/.test(value);
const datetimeValid = isFormallyCorrect && this.isIsoDate(control.value);
alert('datetimeValid?...'+datetimeValid);
//alert('datetimeValid?...'+datetimeValid);
return !datetimeValid ? {datetimeIso:true}: null;
}
}
private validateJsonString():ValidatorFn {
// alert('prova!');
return (control: AbstractControl): ValidationErrors |null => {
const jsonValid = this.isJsonString(control.value);
//alert('datetimeValid?...'+datetimeValid);
return !jsonValid ? {validJson:true}: null;
}
}
checkForErrors(valFc:AbstractControl, inputType:string): string{
let errorMsg: string;
@ -222,24 +237,41 @@ defaultValue={new Date().toISOString().substring(0, (new Date().toISOString().in
if(!this.isIsoDate(valFc.value)){
errorMsg = 'Date is not in correct ISO format';
}
}else{
if(valFc.hasError('pattern')){
errorMsg = ''+ valFc.value+'is not a correct value';
if(!this.checkIfEmpty(valFc.value)&& inputType==='float'){
errorMsg = 'input is not a decimal number (use . as a separator)';
}
if(!this.checkIfEmpty(valFc.value)&& inputType==='boolean'){
errorMsg = 'please enter true or false';
}
if(!this.checkIfEmpty(valFc.value)&& inputType==='date'){
errorMsg = 'date or date format is not correct';
}
}
}
}else if(!this.checkIfEmpty(valFc.value)&& inputType==='complexType'){
if(!this.isJsonString(valFc.value)){
errorMsg = 'Please insert a valid JSON string';
}
}else
{
if(valFc.hasError('pattern')){
errorMsg = ''+ valFc.value+'is not a correct value';
if(!this.checkIfEmpty(valFc.value)&& inputType==='float'){
errorMsg = 'input is not a decimal number (use . as a separator)';
}
if(!this.checkIfEmpty(valFc.value)&& inputType==='boolean'){
errorMsg = 'please enter true or false';
}
if(!this.checkIfEmpty(valFc.value)&& inputType==='date'){
errorMsg = 'date or date format is not correct';
}
}
}
return errorMsg;
}
isJsonString(newValue:string):boolean {
let isOk = true;
try {
JSON.parse(newValue);
isOk = true;
} catch (ex) {
// set parse error if it fails
isOk = false;
}
console.debug('>>>>>>>>JSON OK?.........'+isOk);
return isOk;
}
checkDatetime(denoFacet:string, indexFct:number, prop:IFacetProps):string{
let errorMsg: string;
@ -263,14 +295,21 @@ defaultValue={new Date().toISOString().substring(0, (new Date().toISOString().in
let errorMsg: string;
// eslint-disable-next-line prefer-const
errorMsg='';
console.debug('************');
const valFc = this.getPropsGroup(denoFacet,indexFct).get(prop.name)!;
/*
if(prop.validations.length>1){
console.debug('------>>>Validator deno 1...'+prop.validations[0].validator)
console.debug('------>>>Validator deno 2...'+prop.validations[1].validator)
}*/
for(let i=0; i<prop.validations.length; i++){
const valObj = prop.validations[i];
//console.debug('Validator index...'+i)
if(valFc.hasError(valObj.validator)){
console.debug()
errorMsg = valObj.message;
}
}
//console.debug('************');
return errorMsg;
}
@ -383,7 +422,7 @@ defaultValue={new Date().toISOString().substring(0, (new Date().toISOString().in
this.dialogRef.close('error');
});
}else{
alert("Data provided is not valid!");
// alert("Data provided is not valid!");
}
}