feat(form-core): add <FieldMeta>.isValid

docs/framework/angular/guides/validation.md

@@ -120,7 +120,7 @@ So you can control when the validation is done by implementing the desired callb
         (blur)="age.api.handleBlur()"
         (input)="age.api.handleChange($any($event).target.valueAsNumber)"
       />
-      @if (age.api.state.meta.errors) {
+      @if (!age.api.state.meta.isValid) {
         <em role="alert">{{ age.api.state.meta.errors.join(', ') }}</em>
       }
     </ng-container>

docs/framework/react/guides/react-native.md

@@ -19,9 +19,9 @@ Here is an example:
     <>
       <Text>Age:</Text>
       <TextInput value={field.state.value} onChangeText={field.handleChange} />
-      {field.state.meta.errors ? (
+      {!field.state.meta.isValid && (
         <Text>{field.state.meta.errors.join(', ')}</Text>
-      ) : null}
+      )}
     </>
   )}
 </form.Field>

docs/framework/react/guides/validation.md

@@ -33,9 +33,9 @@ Here is an example:
         type="number"
         onChange={(e) => field.handleChange(e.target.valueAsNumber)}
       />
-      {field.state.meta.errors ? (
+      {!field.state.meta.isValid && (
         <em role="alert">{field.state.meta.errors.join(', ')}</em>
-      ) : null}
+      )}
     </>
   )}
 </form.Field>
@@ -64,9 +64,9 @@ In the example above, the validation is done at each keystroke (`onChange`). If,
         // We always need to implement onChange, so that TanStack Form receives the changes
         onChange={(e) => field.handleChange(e.target.valueAsNumber)}
       />
-      {field.state.meta.errors ? (
+      {!field.state.meta.isValid && (
         <em role="alert">{field.state.meta.errors.join(', ')}</em>
-      ) : null}
+      )}
     </>
   )}
 </form.Field>
@@ -96,9 +96,9 @@ So you can control when the validation is done by implementing the desired callb
         // We always need to implement onChange, so that TanStack Form receives the changes
         onChange={(e) => field.handleChange(e.target.valueAsNumber)}
       />
-      {field.state.meta.errors ? (
+      {!field.state.meta.isValid && (
         <em role="alert">{field.state.meta.errors.join(', ')}</em>
-      ) : null}
+      )}
     </>
   )}
 </form.Field>
@@ -122,9 +122,9 @@ Once you have your validation in place, you can map the errors from an array to
     return (
       <>
         {/* ... */}
-        {field.state.meta.errors.length ? (
+        {!field.state.meta.isValid && (
           <em>{field.state.meta.errors.join(',')}</em>
-        ) : null}
+        )}
       </>
     )
   }}
@@ -273,9 +273,9 @@ export default function App() {
                 type="number"
                 onChange={(e) => field.handleChange(e.target.valueAsNumber)}
               />
-              {field.state.meta.errors ? (
+              {!field.state.meta.isValid && (
                 <em role="alert">{field.state.meta.errors.join(', ')}</em>
-              ) : null}
+              )}
             </>
           )}
         </form.Field>
@@ -357,9 +357,9 @@ To do this, we have dedicated `onChangeAsync`, `onBlurAsync`, and other methods
         type="number"
         onChange={(e) => field.handleChange(e.target.valueAsNumber)}
       />
-      {field.state.meta.errors ? (
+      {!field.state.meta.isValid && (
         <em role="alert">{field.state.meta.errors.join(', ')}</em>
-      ) : null}
+      )}
     </>
   )}
 </form.Field>
@@ -389,9 +389,9 @@ Synchronous and Asynchronous validations can coexist. For example, it is possibl
         onBlur={field.handleBlur}
         onChange={(e) => field.handleChange(e.target.valueAsNumber)}
       />
-      {field.state.meta.errors ? (
+      {!field.state.meta.isValid && (
         <em role="alert">{field.state.meta.errors.join(', ')}</em>
-      ) : null}
+      )}
     </>
   )}
 </form.Field>

docs/framework/react/quick-start.md

@@ -120,9 +120,9 @@ const PeoplePage = () => {
             type="number"
             onChange={(e) => field.handleChange(e.target.valueAsNumber)}
           />
-          {field.state.meta.errors.length ? (
+          {!field.state.meta.isValid && (
             <em>{field.state.meta.errors.join(',')}</em>
-          ) : null}
+          )}
         </>
       )}
     />

docs/framework/solid/guides/validation.md

@@ -33,7 +33,7 @@ Here is an example:
         type="number"
         onInput={(e) => field().handleChange(e.target.valueAsNumber)}
       />
-      {field().state.meta.errors ? (
+      {!field().state.meta.isValid ? (
         <em role="alert">{field().state.meta.errors.join(', ')}</em>
       ) : null}
     </>
@@ -64,7 +64,7 @@ In the example above, the validation is done at each keystroke (`onChange`). If,
         // We always need to implement onInput, so that TanStack Form receives the changes
         onInput={(e) => field().handleChange(e.target.valueAsNumber)}
       />
-      {field().state.meta.errors ? (
+      {!field().state.meta.isValid ? (
         <em role="alert">{field().state.meta.errors.join(', ')}</em>
       ) : null}
     </>
@@ -96,7 +96,7 @@ So you can control when the validation is done by implementing the desired callb
         // We always need to implement onInput, so that TanStack Form receives the changes
         onInput={(e) => field().handleChange(e.target.valueAsNumber)}
       />
-      {field().state.meta.errors ? (
+      {!field().state.meta.isValid ? (
         <em role="alert">{field().state.meta.errors.join(', ')}</em>
       ) : null}
     </>
@@ -122,7 +122,7 @@ Once you have your validation in place, you can map the errors from an array to
     return (
       <>
         {/* ... */}
-        {field().state.meta.errors.length ? (
+        {!field().state.meta.isValid ? (
           <em>{field().state.meta.errors.join(',')}</em>
         ) : null}
       </>
@@ -364,7 +364,7 @@ To do this, we have dedicated `onChangeAsync`, `onBlurAsync`, and other methods
         type="number"
         onInput={(e) => field().handleChange(e.target.valueAsNumber)}
       />
-      {field().state.meta.errors ? (
+      {!field().state.meta.isValid ? (
         <em role="alert">{field().state.meta.errors.join(', ')}</em>
       ) : null}
     </>

docs/framework/vue/guides/validation.md

@@ -35,7 +35,7 @@ Here is an example:
         @input="(e) => field.handleChange((e.target as HTMLInputElement).valueAsNumber)
                 "
       />
-      <em role="alert" v-if="field.state.meta.errors">{{
+      <em role="alert" v-if="!field.state.meta.isValid">{{
         field.state.meta.errors.join(', ')
       }}</em>
     </template>
@@ -69,7 +69,7 @@ In the example above, the validation is done at each keystroke (`onChange`). If,
         @input="(e) => field.handleChange((e.target as HTMLInputElement).valueAsNumber)
                 "
       />
-      <em role="alert" v-if="field.state.meta.errors">{{
+      <em role="alert" v-if="!field.state.meta.isValid">{{
         field.state.meta.errors.join(', ')
       }}</em>
     </template>
@@ -104,7 +104,7 @@ So you can control when the validation is done by implementing the desired callb
         @input="(e) => field.handleChange((e.target as HTMLInputElement).valueAsNumber)
                 "
       />
-      <em role="alert" v-if="field.state.meta.errors">{{
+      <em role="alert" v-if="!field.state.meta.isValid">{{
         field.state.meta.errors.join(', ')
       }}</em>
     </template>
@@ -131,7 +131,7 @@ Once you have your validation in place, you can map the errors from an array to
   >
     <template v-slot="{ field }">
       <!-- ... -->
-      <em role="alert" v-if="field.state.meta.errors">{{
+      <em role="alert" v-if="!field.state.meta.isValid">{{
         field.state.meta.errors.join(', ')
       }}</em>
     </template>
@@ -346,7 +346,7 @@ const onChangeAge = async ({ value }) => {
             field.handleChange((e.target as HTMLInputElement).valueAsNumber)
         "
       />
-      <em role="alert" v-if="field.state.meta.errors">{{
+      <em role="alert" v-if="!field.state.meta.isValid">{{
         field.state.meta.errors.join(', ')
       }}</em>
     </template>
@@ -391,7 +391,7 @@ const onBlurAgeAsync = async ({ value }) => {
             field.handleChange((e.target as HTMLInputElement).valueAsNumber)
         "
       />
-      <em role="alert" v-if="field.state.meta.errors">{{
+      <em role="alert" v-if="!field.state.meta.isValid">{{
         field.state.meta.errors.join(', ')
       }}</em>
     </template>

docs/overview.md

@@ -34,7 +34,7 @@ import type { AnyFieldApi } from '@tanstack/react-form'
 function FieldInfo({ field }: { field: AnyFieldApi }) {
   return (
     <>
-      {field.state.meta.isTouched && field.state.meta.errors.length ? (
+      {field.state.meta.isTouched && !field.state.meta.isValid ? (
         <em>{field.state.meta.errors.join(', ')}</em>
       ) : null}
       {field.state.meta.isValidating ? 'Validating...' : null}

examples/lit/simple/src/index.ts

@@ -70,7 +70,7 @@ export class TanStackFormDemo extends LitElement {
                             />
                           </div>
                           ${field.state.meta.isTouched &&
-                          field.state.meta.errors.length
+                          !field.state.meta.isValid
                             ? html`${repeat(
                                 field.state.meta.errors,
                                 (__, idx) => idx,
@@ -167,7 +167,7 @@ export class TanStackFormDemo extends LitElement {
                                       />
                                     </div>
                                     ${jobTitleField.state.meta.isTouched &&
-                                    jobTitleField.state.meta.errors.length
+                                    !jobTitleField.state.meta.isValid
                                       ? html`${repeat(
                                           jobTitleField.state.meta.errors,
                                           (__, idx) => idx,

examples/lit/ui-libraries/src/index.ts

@@ -73,7 +73,7 @@ export class TanStackFormDemo extends LitElement {
                             }}"
                             .error="${!!(
                               field.state.meta.isTouched &&
-                              field.state.meta.errors.length
+                              !field.state.meta.isValid
                             )}"
                             .errorText="${field.state.meta.errors.join(', ')}"
                           ></md-filled-text-field>
@@ -96,7 +96,7 @@ export class TanStackFormDemo extends LitElement {
                             }}"
                             .error="${!!(
                               lastNameField.state.meta.isTouched &&
-                              lastNameField.state.meta.errors.length
+                              !lastNameField.state.meta.isValid
                             )}"
                             .errorText="${lastNameField.state.meta.errors.join(
                               ', ',
@@ -147,8 +147,8 @@ export class TanStackFormDemo extends LitElement {
                                           e.target as HTMLInputElement
                                         jobTitleField.handleChange(target.value)
                                       }}"
-                                      .error="${!!jobTitleField.state.meta
-                                        .errors.length}"
+                                      .error="${!jobTitleField.state.meta
+                                        .isValid}"
                                       .errorText="${jobTitleField.state.meta.errors.join(
                                         ', ',
                                       )}"

examples/react/compiler/src/index.tsx

@@ -6,7 +6,7 @@ import type { AnyFieldApi } from '@tanstack/react-form'
 function FieldInfo({ field }: { field: AnyFieldApi }) {
   return (
     <>
-      {field.state.meta.isTouched && field.state.meta.errors.length ? (
+      {field.state.meta.isTouched && !field.state.meta.isValid ? (
         <em>{field.state.meta.errors.join(',')}</em>
       ) : null}
       {field.state.meta.isValidating ? 'Validating...' : null}

examples/react/field-errors-from-form-validators/src/index.tsx

@@ -78,7 +78,7 @@ export default function App() {
                   field.handleChange(e.target.value)
                 }}
               />
-              {field.state.meta.errors.length > 0 ? (
+              {!field.state.meta.isValid ? (
                 <em role="alert">{field.state.meta.errors.join(', ')}</em>
               ) : null}
             </div>
@@ -100,7 +100,7 @@ export default function App() {
                 type="number"
                 onChange={(e) => field.handleChange(e.target.valueAsNumber)}
               />
-              {field.state.meta.errors.length > 0 ? (
+              {!field.state.meta.isValid ? (
                 <em role="alert">{field.state.meta.errors.join(', ')}</em>
               ) : null}
             </div>

examples/react/query-integration/src/index.tsx

@@ -12,7 +12,7 @@ import type { AnyFieldApi } from '@tanstack/react-form'
 function FieldInfo({ field }: { field: AnyFieldApi }) {
   return (
     <>
-      {field.state.meta.isTouched && field.state.meta.errors.length ? (
+      {field.state.meta.isTouched && !field.state.meta.isValid ? (
         <em>{field.state.meta.errors.join(',')}</em>
       ) : null}
       {field.state.meta.isValidating ? 'Validating...' : null}

examples/react/simple/src/index.tsx

@@ -6,7 +6,7 @@ import type { AnyFieldApi } from '@tanstack/react-form'
 function FieldInfo({ field }: { field: AnyFieldApi }) {
   return (
     <>
-      {field.state.meta.isTouched && field.state.meta.errors.length ? (
+      {field.state.meta.isTouched && !field.state.meta.isValid ? (
         <em>{field.state.meta.errors.join(',')}</em>
       ) : null}
       {field.state.meta.isValidating ? 'Validating...' : null}

examples/react/standard-schema/src/index.tsx

@@ -10,7 +10,7 @@ import type { AnyFieldApi } from '@tanstack/react-form'
 function FieldInfo({ field }: { field: AnyFieldApi }) {
   return (
     <>
-      {field.state.meta.isTouched && field.state.meta.errors.length ? (
+      {field.state.meta.isTouched && !field.state.meta.isValid ? (
         <em>{field.state.meta.errors.map((err) => err.message).join(',')}</em>
       ) : null}
       {field.state.meta.isValidating ? 'Validating...' : null}

examples/solid/simple/src/index.tsx

@@ -11,8 +11,7 @@ interface FieldInfoProps {
 function FieldInfo(props: FieldInfoProps) {
   return (
     <>
-      {props.field.state.meta.isTouched &&
-      props.field.state.meta.errors.length ? (
+      {props.field.state.meta.isTouched && !props.field.state.meta.isValid ? (
         <em>{props.field.state.meta.errors.join(',')}</em>
       ) : null}
       {props.field.state.meta.isValidating ? 'Validating...' : null}

packages/form-core/src/FieldApi.ts

@@ -652,6 +652,10 @@ export type FieldMetaDerived<
    * A flag that is `true` if the field's value has not been modified by the user. Opposite of `isDirty`.
    */
   isPristine: boolean
+  /**
+   * A boolean indicating if the field is valid. Evaluates `true` if there are no field errors.
+   */
+  isValid: boolean
 }
 
 export type AnyFieldMetaDerived = FieldMetaDerived<