1010
1111Declarative forms for [ Svelte] ( https://svelte.dev/ ) .
1212
13+ [ DEMO] ( https://svelte.dev/repl/8e7deaa261364b4f8b2c0caff1982eeb?version=3.12.1 )
14+
1315## Features
1416
1517- optional schema-based validation through [ Yup] ( https://github.com/jquense/yup )
@@ -141,7 +143,7 @@ $ yarn add sveltejs-forms
141143<script >
142144 import { Form } from ' sveltejs-forms' ;
143145 import Select from ' svelte-select' ;
144- import * as yup from ' yup' ;
146+ import yup from ' yup' ;
145147
146148 let svelteSelect;
147149
@@ -155,10 +157,7 @@ $ yarn add sveltejs-forms
155157 }
156158
157159 const schema = yup .object ().shape ({
158- food: yup
159- .array ()
160- .of (yup .string ().required ())
161- .min (2 ),
160+ food: yup .string ().required ()
162161 });
163162
164163 let items = [
@@ -173,29 +172,22 @@ $ yarn add sveltejs-forms
173172<Form
174173 {schema}
175174 on:submit ={handleSubmit}
175+ let:isSubmitting
176176 let:setValue
177- let:validate
178177 let:values
179178 let:errors
180179 let:touched >
181180
182181 <Select
183182 {items}
184- isMulti ={true}
185183 bind:this ={svelteSelect}
186184 inputAttributes =" {{ name: 'food' }}"
187185 hasError =" {touched['food'] && errors['food']}"
188- on:select =" {({ detail }) => {
189- setValue('food', detail && detail.map(item => item.value));
190- validate();
191- }}"
192- on:clear =" {() => {
193- setValue('food', []);
194- validate();
195- }}"
196- selectedValue =" {items.filter(item => values['food'].includes(item.value))}" />
197-
198- <button type =" submit" >Sign in</button >
186+ on:select =" {({ detail }) => setValue('food', detail.value)}"
187+ on:clear =" {() => setValue('food', '')}"
188+ selectedValue =" {items.find(item => item.value === values['food'])}" />
189+
190+ <button type =" submit" disabled ={isSubmitting} >Submit</button >
199191</Form >
200192```
201193
0 commit comments