svelte-forms-lib icon indicating copy to clipboard operation
svelte-forms-lib copied to clipboard

support nested json object binding with Form

Open xmlking opened this issue 2 years ago • 0 comments

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>

xmlking avatar Jul 16 '22 05:07 xmlking