Merge pull request #192 from wellyshen/feature/controlled-option

Feat(useForm): add "controlled" option for "field" method

.changeset/rude-moles-drive.md

@@ -0,0 +1,5 @@
+---
+"react-cool-form": patch
+---
+
+feat(useForm): add `controlled` option for `field` method

README.md

@@ -271,6 +271,7 @@ interface Field<V = FormValues, E = any> {
  format?: Format;
  onChange?: OnChange<E>;
  onBlur?: OnBlur;
+ controlled?: boolean;
  }
  ): {
  name: string;

app/src/Form/Field.tsx

@@ -38,7 +38,7 @@ const Field = ({
  validate,
  value,
  defaultValue: "welly",
- // parse,
+ parse,
  format: (val) => `formatted ${val}`,
  onChange: (e, val) => {
  setValue(val);
@@ -48,6 +48,7 @@ const Field = ({
  onBlur: (e) => {
  // console.log("LOG ===> onBlur: ", e);
  },
+ controlled: false,
  })}
  {...rest}
  />

src/types/index.ts

@@ -173,6 +173,7 @@ export interface Field<V, E = any> {
  format?: (value: any) => any;
  onChange?: (event: E, value?: any) => void;
  onBlur?: (event: FocusEvent<any>) => void;
+ controlled?: boolean;
  }
  ): {
  name: string;

src/types/react-cool-form.d.ts

@@ -162,6 +162,7 @@ declare module "react-cool-form" {
  format?: Format;
  onChange?: OnChange<E>;
  onBlur?: OnBlur;
+ controlled?: boolean;
  }
  ): {
  name: string;

src/useForm.ts

@@ -684,7 +684,16 @@ export default <V extends FormValues = FormValues>({
  const field = useCallback<Field<V>>(
  (
  name,
- { validate, value, defaultValue, parse, format, onChange, onBlur } = {}
+ {
+ validate,
+ value,
+ defaultValue,
+ parse,
+ format,
+ onChange,
+ onBlur,
+ controlled = true,
+ } = {}
  ) => {
  if (!name) {
  warn('💡 react-cool-form > field: Missing the "name" parameter.');
@@ -698,8 +707,12 @@ export default <V extends FormValues = FormValues>({
  defaultValue = !isUndefined(val) ? val : defaultValue;
  if (!isUndefined(defaultValue)) setDefaultValue(name, defaultValue);
 
- value = !isUndefined(value) ? value : getState(`values.${name}`);
- value = (format ? format(value) : value) ?? "";
+ if (controlled) {
+ value = !isUndefined(value) ? value : getState(`values.${name}`);
+ value = (format ? format(value) : value) ?? "";
+ } else {
+ value = undefined;
+ }
 
  return {
  name,