Formula - Svelte용 Zero-Configuration Reactive Forms 모듈

Demo

NPM Page

오늘 저는 Svelte Formula의 출시를 발표하게 되어 기쁩니다 - 새로운 형식
Svelte용 라이브러리.

Formula는 Zero-Config 라이브러리입니다. 즉, 양식 유효성 검사 및 제출을 처리하기 위해 라이브러리 자체에 설정을 전달할 필요가 없습니다. HTML5 양식의 유효성 검사 속성을 직접 사용하므로 점진적이고 액세스 가능한 양식을 만들 수 있습니다. 첫 번째.

라이브러리는 use directive과 함께 사용되며 <form> 요소뿐만 아니라 모든 요소에 바인딩될 수 있으며 라이브러리는 name 속성이 있는 모든 양식 요소에 대한 구독 및 구독 취소를 자동으로 처리합니다.

다음은 데모의 예입니다.

<script>
  import {onDestroy} from 'svelte';
  import {formula} from '[email protected]'

  const {form, formValues, validity, touched, formValid} = formula();

  const sub = formValues.subscribe(v => console.log(v));

  onDestroy(() => {
    sub();
  })
</script>

<form use:form>
  <div class='form-field'>
    <label for='username'>Username</label>
    <input type='text' id='username' name='username' required minlength="8" class:error={$touched?.username &&
           $validity?.username?.invalid}/>
    <div hidden={$validity?.username?.valid}>{$validity?.username?.message}</div>
  </div>
  <div class='form-field'>
    <label for='password'>Password</label>
    <input type='password' id='password' name='password' required minlength="8" class:error={$touched?.password &&
           $validity?.username?.invalid}/>
    <div hidden={$validity?.password?.valid}>{$validity?.password?.message}</div>
  </div>

  <button disabled={!$formValid}>Save</button>
</form>

<style>
  .form-field {
    margin-bottom: 10px;
    border-bottom: 1px solid lightgrey;
  }

  .error {
    border: 1px solid red;
  }
</style>

이 예에서 유일한 유효성 검사는 HTML 요소 자체에 직접 적용되는 required 및 minlength입니다. 오류 및 오류 상태를 표시하는 것은 validity 개체를 통해 이루어지며 touched 개체를 사용하면 양식 요소가 다음 경우에만 적용할 수 있습니다. 에 먼저 초점을 맞춥니다.

릴리스는 alpha 버전으로 간주됩니다. API가 변경될 수 있고 여전히 올바른 테스트 및 문서가 있습니다. 그러나 npm install svelte-formula를 사용하여 현재 프로젝트에서 사용해 볼 수 있습니다. 버그, 문제 또는 제안 사항이 있으면 언제든지 문의하십시오. leave them here