Working with Forms & User InputEntry 10 of 10
Summary
| Concept | React | Angular |
|---|---|---|
| Submit handler | onSubmit + event.preventDefault() | (ngSubmit) (no reload) |
| Labels | htmlFor | for |
| Form state | useState({...}) (controlled) or the DOM (uncontrolled) | FormGroup of FormControls |
| Bind an input | value + onChange | formControlName |
| Generic handler | [name]: value | Not needed |
| Read the DOM | useRef | Template variable #ref |
| Collect all values | FormData + Object.fromEntries() | form.getRawValue() |
| Multi-value fields | fd.getAll() | FormControl<string[]>, FormArray |
| Reset | form.reset() / reset state | form.reset() |
| Browser validation | required, minLength, pattern … | Off by default (novalidate); ngNativeValidate to enable |
| App validation | Derived from state; didEdit for blur | Validators, touched, invalid |
| Show all errors on submit | Set all didEdit | markAllAsTouched() |
| Reusable field | <Input> + useInput() | Component taking a FormControl |
| Next step | Form actions (<form action>, useActionState) | Same Reactive Forms |
React gives you primitives: you choose between state and the DOM and build validation and touched-tracking yourself (or with React Hook Form). Angular's Reactive Forms ship the model, validation, and interaction state in one API. React 19 shifts the default toward uncontrolled forms with FormData, which the next topic covers.