Form status

Form status (폼 상태)

폼의 dirty 여부, 제출 중(submitting), 검증 중(validating) 같은 상태를 확인하고 관리하는 방법을 다뤄요. 상태 관련 API를 하나씩 설명해 드릴게요.

출처: 문서

본문

dirty 검사에 사용하는 기준값을 초기화하려면 새 값과 함께 form.resetDirty를 호출해요:

import { useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { a: 1 },
});

form.setValues({ a: 2 });
form.isDirty(); // -> true

form.resetDirty({ a: 2 });
form.isDirty(); // -> false

form.setValues({ a: 3 });
form.isDirty(); // -> true

제출 중 상태 (Submitting state)

form.onSubmit에 전달한 함수가 Promise를 반환하면 form.submitting 필드가 true가 돼요. Promise가 resolve되거나 reject된 뒤에는 false로 돌아와요:

import { useState } from 'react';
import { Button, Group, Stack, Text, TextInput } from '@mantine/core';
import { useForm } from '@mantine/form';

const asyncSubmit = (values: any) =>
  new Promise((resolve) => setTimeout(() => resolve(values), 3000));

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { name: 'John' },
  });

  const [completed, setCompleted] = useState(false);

  const handleSubmit = async (values: typeof form.values) => {
    await asyncSubmit(values);
    setCompleted(true);
  };

  if (completed) {
    return (
      <Stack>
        <Text>Form submitted!</Text>
        <Button onClick={() => setCompleted(false)}>Reset to initial state</Button>
      </Stack>
    );
  }

  return (
    <form onSubmit={form.onSubmit(handleSubmit)}>
      <TextInput
        withAsterisk
        label="Name"
        placeholder="Your name"
        key={form.key('name')}
        disabled={form.submitting}
        {...form.getInputProps('name')}
      />

      <Group justify="flex-end" mt="md">
        <Button type="submit" loading={form.submitting}>
          Submit
        </Button>
      </Group>
    </form>
  );
}

form.submitting을 수동으로 true나 false로 설정할 수도 있어요:

import { useForm } from '@mantine/form';

const form = useForm({ mode: 'uncontrolled' });
form.submitting; // -> false

form.setSubmitting(true);
form.submitting; // -> true

form.setSubmitting(false);
form.submitting; // -> false

검증 중 상태 (Validating state)

어떤 비동기 검증이 진행 중이면 form.validating 속성이 true예요. 이는 form.validate(), form.validateField(), form.isValid(), 그리고 form.onSubmit이 유발한 검증에 모두 적용돼요.

form.isValidating(path)는 특정 필드가 현재 검증 중이면 true를 반환해요. form.validate() 또는 form.onSubmit이 모든 규칙을 실행하면 규칙이 있는 모든 필드가 검증 중으로 간주돼요. form.validateField(path)를 호출하면 대상 필드만 검증 중으로 간주돼요.

import { useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { username: '' },
  validate: {
    username: async (value) => {
      // simulate an API call
      await new Promise((resolve) => setTimeout(resolve, 500));
      return value === 'admin' ? 'Username is taken' : null;
    },
  },
});

form.validating; // -> false while idle, true during validation
form.isValidating('username'); // -> true while `username` rule is running

더 알아보기 (Learn more)