Skip to content

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant