Forms
56 bites tagged Forms — interview questions with model answers, and 60-second explainers.
Build and validate a login form with Form and GlobalKey
This tests Flutter's declarative form validation. A strong answer covers wrapping fields in a Form, using a GlobalKey<FormState>, calling validate on submit, and acting only on true.
Explain the validator property in TextFormField and what triggers error display
Tests Form validation lifecycle knowledge. Strong answer: validator returns String? error or null; formKey.currentState.validate() triggers all fields; returned string renders as inline error.
What client-side and server-side validations belong on a campaign sign-up form?
This tests defense in depth and UX trade-offs. A strong answer maps validations to layers: regex and immediate feedback client-side, strict schema and rate limiting server-side, plus duplicate checks. Red flag: claiming client-side validation is sufficient.
Angular Custom Validators: Beyond Built-in Rules
Custom validators let you define your own business logic for form inputs. Use them to check for unique usernames via an API or enforce complex password rules. The main footgun is forgetting async validators must return an Observable or Promise.
VeeValidate: Vue Forms Without the Boilerplate
VeeValidate manages the entire lifecycle of a Vue form—tracking values, validation, and submissions—so you don't write the state boilerplate. Use it for simple contact forms or complex wizards, especially with async validation. The footgun is mixing its APIs.
SvelteKit Form Actions: Server-Side Logic for Forms
SvelteKit Form Actions link HTML forms directly to server-side code, handling submissions without client-side boilerplate. They're perfect for logins or registrations and work without JavaScript.
Angular's Reactive Form Classes: FormControl, FormGroup, FormArray
Reactive forms build a data model in your code, not the template. Use `FormControl` for one input, `FormGroup` for a set of fields like a login form, and `FormArray` for dynamic lists. The main footgun is forgetting to import `ReactiveFormsModule`.
Angular's Built-in Form Validators
Angular's built-in validators are pre-made rules for your forms. Use them to easily check for required fields, min/max length, and valid email formats. The footgun is confusing `required` for text inputs with `requiredTrue`, which is only for checkboxes.
Component v-model: Two-Way Binding with defineModel
v-model on a component creates a two-way binding, letting a parent and child share and update data. The `defineModel()` macro is the modern way to enable this for custom form inputs. The footgun is that a `default` value can de-sync parent/child state.
Angular Template-Driven Forms: Logic in the HTML
Angular Template-Driven Forms put form logic directly in your HTML template. Using two-way data binding with `[(ngModel)]`, they're great for simple scenarios like login or contact forms.
Angular Two-Way Binding: [(ngModel)]
Think of [(ngModel)] as a walkie-talkie for data, syncing a component property with a template view. It's used in forms where user input immediately updates a variable, and vice-versa. The footgun is overusing it, which creates tangled data flows.
Vue's v-model: Two-Way Binding Made Simple
v-model creates a two-way binding that synchronizes form inputs with your JavaScript data. Use it on any form element like an input or textarea. The footgun: it ignores initial HTML attributes; your JavaScript state is always the single source of truth.
Accessible Form Design: A Conversation, Not an Interrogation
Think of a form not as a data bucket, but a structured conversation. Every field is a question needing a clear prompt. This is vital for logins and checkouts, especially for users with screen readers. The footgun: using placeholder text as a label.
The FormData API: From HTML Forms to Typed Objects
FormData serializes an HTML form into key/value pairs for `fetch`. In TypeScript, its main footgun is that `get()` returns a generic `string | File | null`, requiring you to validate and cast the data before using it safely.
React's useFormStatus: Read Form State from a Child Component
The `useFormStatus` hook lets a child component read its parent form's submission status without prop drilling. Use it to disable a submit button or show a loading spinner from within a reusable component.
useFormState (now useActionState): State for Actions
useActionState (formerly useFormState) lets you update state from an async Action. It returns the action's result, a dispatch function, and a pending status. Use it to manage form UI for loading states and validation messages from Server Actions.
Handling File Uploads in React
Treat a file input like a remote control for the browser's file picker. React can't hold the file data directly in state, but it can grab a reference to the selected file and send it to a server using a `FormData` object.
Formik: Taming React Form State
Formik is a state machine for your React forms, managing values, errors, and visited fields without providing UI. Use it to avoid boilerplate for validation and submission. The footgun is fighting its design by trying to integrate it with global state stores.
React Hook Form: Faster Forms with Less Code
React Hook Form builds performant forms by using uncontrolled inputs, avoiding re-renders on every keystroke. It's ideal for complex forms where managing state with `useState` becomes slow. The main footgun: overuse of `watch()` can negate performance gains.
FormData: Package Form Data for HTTP Requests
The FormData API is a digital shipping container for your form's data, packaging input into a format HTTP requests understand. Use it to send forms, including files, with `fetch()` without manually setting headers.
React's Controlled vs. Uncontrolled Components
A controlled component is a form input whose value is driven by React state; an uncontrolled component lets the DOM manage its own state. Use controlled for instant validation or conditional logic.
React Native Slider: Selecting a Value from a Range
A slider is a visual control for selecting a numeric value from a range, like a volume knob. Use it for settings like brightness or price filters. The main footgun is forgetting to capture the slider's value in your app's state on value change.
React Native TextInput: Handling User Input
TextInput is your app's keyboard entry point. Use it for search bars and forms, configuring features like auto-capitalization and keyboard type. Be careful with styling: Android adds a default underline, and multiline mode can break single-side border styles.
FastAPI: Handling Form Data, Not Just JSON
FastAPI can handle classic HTML form data, not just JSON. Use `Form` to define expected fields in your endpoint, just like query parameters. It's ideal for login pages. The footgun: forgetting to `pip install python-multipart` will break form parsing.
Get Forms bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.