Skip to content

Commit cb4866a

Browse files
prash5tprash5t
committed
feat: fields having options based on its parent field
1 parent 7d97b18 commit cb4866a

File tree

2 files changed

+455
-6
lines changed

2 files changed

+455
-6
lines changed

‎lib/mock_data/developer_doc.html

+331-6
Original file line numberDiff line numberDiff line change
@@ -373,6 +373,22 @@ <h2>Complete JSON Example</h2>
373373
"patternMessage": "First name can only contain letters"
374374
}
375375
},
376+
{
377+
"key": "lastName",
378+
"type": "text",
379+
"label": "Last Name",
380+
"validation": {
381+
"required": true,
382+
"pattern": "[a-zA-Z]",
383+
"minLength": 2,
384+
"maxLength": 20,
385+
"inputType": "name",
386+
"requiredMessage": "Please enter your last name",
387+
"minLengthMessage": "Last name must be at least 2 characters long",
388+
"maxLengthMessage": "Last name cannot exceed 50 characters",
389+
"patternMessage": "Last name can only contain letters"
390+
}
391+
},
376392
{
377393
"key": "gender",
378394
"type": "radio",
@@ -394,7 +410,7 @@ <h2>Complete JSON Example</h2>
394410
"minLength": 2,
395411
"maxLength": 100,
396412
"inputType": "text"
397-
}
413+
},
398414
},
399415
{
400416
"key": "profession",
@@ -407,22 +423,98 @@ <h2>Complete JSON Example</h2>
407423
],
408424
"validation": {"required": true}
409425
},
426+
{
427+
"key": "highestEducation",
428+
"type": "dropdown",
429+
"label": "Highest Level of Education",
430+
"dependency": {
431+
"field": "profession",
432+
"value": "0" // Student
433+
},
434+
"options": [
435+
{"display": "High School", "value": "hs"},
436+
{"display": "Bachelor's", "value": "bs"},
437+
{"display": "Master's", "value": "ms"},
438+
{"display": "PhD", "value": "phd"}
439+
],
440+
"validation": {"required": true}
441+
},
410442
{
411443
"key": "businessValuation",
412444
"type": "text",
413-
"label": "Business Valuation ($)",
445+
"label": "Business Valuation (\$)",
414446
"dependency": {
415447
"field": "profession",
416-
"value": "1"
448+
"value": "1" // Business
417449
},
418450
"validation": {
419451
"required": true,
420452
"pattern": "[0-9]",
421453
"inputType": "number",
422454
"minNumber": 100.00,
423455
"maxNumber": 10000000.00,
424-
"minNumberMessage": "Business valuation must be at least 100$",
425-
"maxNumberMessage": "Business valuation cannot exceed 10,000,000$"
456+
"minNumberMessage": "Business valuation must be at least 100\$",
457+
"maxNumberMessage": "Business valuation cannot exceed 10,000,000\$"
458+
}
459+
},
460+
{
461+
"key": "jobTitle",
462+
"type": "text",
463+
"label": "Job Title",
464+
"dependency": {
465+
"field": "profession",
466+
"value": "2" // Job
467+
},
468+
"validation": {
469+
"required": true,
470+
"minLength": 2,
471+
"maxLength": 50,
472+
"inputType": "text"
473+
}
474+
},
475+
{
476+
"key": "dob",
477+
"type": "date",
478+
"label": "Date of Birth",
479+
"validation": {
480+
"required": true,
481+
"startDate": "1990-01-20T01:01:55.200Z",
482+
"endDate": "2019-08-15T12:00:00Z",
483+
}
484+
},
485+
{
486+
"key": "photo",
487+
"type": "photo",
488+
"label": "Passport Photo",
489+
"validation": {
490+
"required": true,
491+
"requiredMessage": "Please upload your passport photo",
492+
"maxSizeInMB": 3.0,
493+
"maxSizeMessage": "Passport photo cannot exceed 1MB",
494+
"minCount": 1,
495+
"minCountMessage": "Please upload at least 1 photo",
496+
"maxCount": 3,
497+
"maxCountMessage": "You can upload maximum 1 photo",
498+
"allowedExtensions": ["jpg", "jpeg", "png"],
499+
"allowedExtensionsMessage": "Only JPG, JPEG, PNG files are allowed"
500+
}
501+
},
502+
{
503+
"key": "file",
504+
"type": "file",
505+
"label": "Land Ownership Certificate",
506+
"validation": {
507+
"required": true,
508+
"requiredMessage": "Please upload your land ownership certificates",
509+
"maxSizeInMB": 3.0,
510+
"maxSizeMessage": "One file cannot exceed 20MB",
511+
"minCount": 1,
512+
"minCountMessage": "Please upload at least 1 file",
513+
"maxCount": 5,
514+
"maxCountMessage": "You can upload maximum 5 files",
515+
"allowedExtensions": ["jpg", "jpeg", "png", "pdf", "mp3"],
516+
"allowedExtensionsMessage":
517+
"Only JPEG, JPG, PNG, MP3 and PDF files are allowed"
426518
}
427519
}
428520
]
@@ -441,10 +533,243 @@ <h2>Complete JSON Example</h2>
441533
"inputType": "email",
442534
"patternMatch": "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}",
443535
"requiredMessage": "Please enter your email",
444-
"minLengthMessage": "Email must be at least 4 characters long",
536+
"minLengthMessage": "Email name must be at least 4 characters long",
445537
"maxLengthMessage": "Email cannot exceed 60 characters",
446538
"patternMessage": "Please enter a valid email address"
447539
}
540+
},
541+
{
542+
"key": "phone",
543+
"type": "text",
544+
"label": "Phone Number",
545+
"validation": {
546+
"required": false,
547+
"pattern": "[0-9]",
548+
"minLength": 5,
549+
"maxLength": 15,
550+
"inputType": "phone"
551+
}
552+
},
553+
]
554+
},
555+
{
556+
"title": "Your Preferences",
557+
"fields": [
558+
{
559+
"key": "hobby",
560+
"type": "text",
561+
"label": "What's your hobby?",
562+
"validation": {
563+
"required": false,
564+
"minLength": 2,
565+
"maxLength": 200,
566+
"inputType": "multiline"
567+
}
568+
},
569+
{
570+
"key": "diet",
571+
"type": "dropdown",
572+
"label": "Diet",
573+
"options": [
574+
{"display": "VEG", "value": "0"},
575+
{"display": "NON-VEG", "value": "1"},
576+
],
577+
"validation": {"required": true}
578+
},
579+
{
580+
"key": "non-veg",
581+
"type": "checkbox",
582+
"label": "Non-Veg",
583+
"dependency": {"field": "diet", "value": "1"},
584+
"options": [
585+
{"display": "Chicken", "value": "0"},
586+
{"display": "Mutton", "value": "1"},
587+
{"display": "Fish", "value": "2"},
588+
{"display": "Pork", "value": "3"},
589+
{"display": "Beef", "value": "4"},
590+
],
591+
"validation": {
592+
"required": true,
593+
"minChecked": 1,
594+
"maxChecked": 5,
595+
"requiredMessage": "Please select at least one non-veg item",
596+
"minCheckedMessage": "Please select at least one non-veg item",
597+
"maxCheckedMessage": "You can select maximum 5 non-veg items"
598+
}
599+
},
600+
{
601+
"key": "drinks",
602+
"type": "radio",
603+
"label": "Do you drink?",
604+
"options": [
605+
{"display": "Yes", "value": "0"},
606+
{"display": "No", "value": "1"},
607+
],
608+
"validation": {"required": true}
609+
},
610+
{
611+
"key": "hobbies",
612+
"type": "checkbox",
613+
"label": "What are your hobbies?",
614+
"options": [
615+
{"display": "Reading", "value": "reading"},
616+
{"display": "Gaming", "value": "gaming"},
617+
{"display": "Cooking", "value": "cooking"},
618+
{"display": "Traveling", "value": "traveling"}
619+
],
620+
"validation": {
621+
"required": true,
622+
"minChecked": 1,
623+
"maxChecked": 3,
624+
"requiredMessage": "Please select at least one hobby",
625+
"minCheckedMessage": "Please select at least one hobby",
626+
"maxCheckedMessage": "You can select maximum 3 hobbies"
627+
}
628+
},
629+
{
630+
"key": "favoriteGames",
631+
"type": "checkbox",
632+
"label": "What are your favorite games?",
633+
"dependency": {"field": "hobbies", "value": "gaming"},
634+
"options": [
635+
{"display": "Chess", "value": "chess"},
636+
{"display": "Football", "value": "football"},
637+
{"display": "Cricket", "value": "cricket"},
638+
{"display": "Tennis", "value": "tennis"},
639+
{"display": "Basketball", "value": "basketball"}
640+
],
641+
"validation": {
642+
"required": false,
643+
"minChecked": 1,
644+
"maxChecked": 2,
645+
"requiredMessage": "Please select at least one game",
646+
"minCheckedMessage": "Please select at least one game",
647+
"maxCheckedMessage": "You can select maximum 2 games"
648+
}
649+
}
650+
]
651+
},
652+
{
653+
"title": "Address Information",
654+
"fields": [
655+
{
656+
"key": "province",
657+
"type": "dropdown",
658+
"label": "Province",
659+
"options": [
660+
{"display": "Province 1", "value": "p1"},
661+
{"display": "Province 2", "value": "p2"},
662+
{"display": "Province 3", "value": "p3"}
663+
],
664+
"validation": {
665+
"required": true,
666+
"requiredMessage": "Please select your province"
667+
}
668+
},
669+
{
670+
"key": "district",
671+
"type": "dropdown",
672+
"label": "District",
673+
"dependency": {"field": "province", "value": "p1"},
674+
"options": [
675+
{"display": "District 1A", "value": "d1a"},
676+
{"display": "District 1B", "value": "d1b"},
677+
{"display": "District 1C", "value": "d1c"}
678+
],
679+
"validation": {
680+
"required": true,
681+
"requiredMessage": "Please select your district"
682+
}
683+
},
684+
{
685+
"key": "district_p2",
686+
"type": "dropdown",
687+
"label": "District",
688+
"dependency": {"field": "province", "value": "p2"},
689+
"options": [
690+
{"display": "District 2A", "value": "d2a"},
691+
{"display": "District 2B", "value": "d2b"},
692+
{"display": "District 2C", "value": "d2c"}
693+
],
694+
"validation": {
695+
"required": true,
696+
"requiredMessage": "Please select your district"
697+
}
698+
},
699+
{
700+
"key": "district_p3",
701+
"type": "dropdown",
702+
"label": "District",
703+
"dependency": {"field": "province", "value": "p3"},
704+
"options": [
705+
{"display": "District 3A", "value": "d3a"},
706+
{"display": "District 3B", "value": "d3b"},
707+
{"display": "District 3C", "value": "d3c"}
708+
],
709+
"validation": {
710+
"required": true,
711+
"requiredMessage": "Please select your district"
712+
}
713+
},
714+
{
715+
"key": "area_d1a",
716+
"type": "dropdown",
717+
"label": "Area",
718+
"dependency": {"field": "district", "value": "d1a"},
719+
"options": [
720+
{"display": "Area 1A-1", "value": "a1a1"},
721+
{"display": "Area 1A-2", "value": "a1a2"},
722+
{"display": "Area 1A-3", "value": "a1a3"}
723+
],
724+
"validation": {
725+
"required": true,
726+
"requiredMessage": "Please select your area"
727+
}
728+
},
729+
{
730+
"key": "area_d1b",
731+
"type": "dropdown",
732+
"label": "Area",
733+
"dependency": {"field": "district", "value": "d1b"},
734+
"options": [
735+
{"display": "Area 1B-1", "value": "a1b1"},
736+
{"display": "Area 1B-2", "value": "a1b2"},
737+
{"display": "Area 1B-3", "value": "a1b3"}
738+
],
739+
"validation": {
740+
"required": true,
741+
"requiredMessage": "Please select your area"
742+
}
743+
},
744+
{
745+
"key": "streetAddress",
746+
"type": "text",
747+
"label": "Street Address",
748+
"validation": {
749+
"required": true,
750+
"minLength": 5,
751+
"maxLength": 200,
752+
"inputType": "multiline",
753+
"requiredMessage": "Please enter your street address",
754+
"minLengthMessage": "Address must be at least 5 characters long",
755+
"maxLengthMessage": "Address cannot exceed 200 characters"
756+
}
757+
},
758+
{
759+
"key": "postalCode",
760+
"type": "text",
761+
"label": "Postal Code",
762+
"validation": {
763+
"required": true,
764+
"pattern": "[0-9]",
765+
"minLength": 5,
766+
"maxLength": 6,
767+
"inputType": "number",
768+
"requiredMessage": "Please enter postal code",
769+
"minLengthMessage": "Postal code must be at least 5 digits",
770+
"maxLengthMessage": "Postal code cannot exceed 6 digits",
771+
"patternMessage": "Postal code can only contain numbers"
772+
}
448773
}
449774
]
450775
}

0 commit comments

Comments
 (0)