Skip to content

support nested json object binding with Form #176

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

xmlking
Copy link

@xmlking xmlking commented Jul 16, 2022

This will help bind nested JSON object properties (including array properties) to Form. Similar to Felte nested-forms

Example:

export const policySchema: ObjectSchema<Policy>  = object({
	id: string().defined(),
	displayName: string().required(),
	description: string().optional(),
	subject: object({
		id: string().defined().required(),
		type: number().required().oneOf([1, 2, 3]),
		secondaryId: string().required(),
		displayName: string().required(),
	})
<Form context={formContext} >

	<div class="relative">
		<label for="displayName" class={labelClass}>Display Name</label>
		<Field type="text" name="displayName" id="displayName" class={inputClass} placeholder="Display Name"/>
		<ErrorMessage class={errorClass} name="displayName"/>
	</div>
        <div>
	        <label for='subject.secondaryId'>Subject SecondaryId</label>
	        <Field type="text" name="subject.secondaryId" id="subject.domain" class={inputClass} placeholder="Subject SecondaryId"
				         disabled={readonly}/>
	        <ErrorMessage class={errorClass} name="subject.secondaryId"/>
        </div>
</Form>

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant