为什么表单字段不会设置为脏 onSubmit？ 反应挂钩形式

Question

Ok guys what we usaully do is if user touched the input then we validate it and show the message. this is ok but when user click the submit then all the fields should set to dirty and all error message should be visible. but this won't happen in my code

  const methods = useForm<FormProps>({
    mode: 'onTouched',
    defaultValues: {
      ...user.data,
    },
    resolver: yupResolver(validationSchema),
  });

        <ColumnStack spacing={0}>
          <InputLabel>First Name</InputLabel>
          <Controller
            control={control}
            name='firstName'
            render={({ field, formState }) => (
              <TextField
                placeholder='Enter Your First Name'
                error={formState.dirtyFields.firstName && formState.errors.firstName.message}
                helperText={formState.dirtyFields.firstName && formState.errors.firstName.message}
                disabled={loading}
                {...field}
              />
            )}
          />
        </ColumnStack>

how should i fix this? when user click on submit all form fields won't set as dirty. I tried changing validation mode to 'onChange', 'onSubmit', 'all' but none of them solved my problem

Answer 1

You can use

setValue("fieldName", value, { shouldDirty: true }) when updating a form value