Controls: {{ controlNames(profileForm) }}
{{ profileForm.value | json }}
`,
})
export class App {
firstName = 'Asha';
city = 'Pune';
controlNames(form: NgForm) {
return Object.keys(form.controls).join(', ');
}
}
```
## Form Input Elements
`ngModel` works with every standard form element. The type of the value depends on the element.
| Element | Value type in the class |
|---|---|
| Text, email, password input, textarea | `string` |
| Number input | `number` |
| Date input | `string` in `yyyy-mm-dd` format |
| Checkbox | `boolean` |
| Radio buttons | The `value` of the selected button |
| Select dropdown | The `value` of the selected option, or the object bound with `[ngValue]` |
### Text Input, Email Input and Password Input
- `type="text"` accepts any text.
- `type="email"` shows an email keyboard on phones and enables email validation.
- `type="password"` hides the characters as the user types.
### Textarea
`
{{ model | json }}
`,
styles: `
.grid { display: grid; gap: 6px; max-width: 360px; }
label { display: flex; justify-content: space-between; gap: 8px; }
`,
})
export class App {
plans = ['Starter', 'Team', 'Enterprise'];
model = {
name: 'Asha',
email: 'asha@example.com',
password: 'secret123',
seats: 5,
start: '2026-04-01',
plan: 'Team',
billing: 'yearly',
terms: true,
notes: '',
};
}
```
Change any field and watch the JSON below update. `seats` stays a number, and `terms` stays a boolean.
### File Input (Overview)
`` lets the user choose files from their computer. `ngModel` does **not** work with file inputs, because the browser does not allow code to set a file input's value.
Instead, listen to the `change` event and read the selected files from the element:
```ts
onFileSelected(event: Event) {
const input = event.target as HTMLInputElement;
const file = input.files?.[0];
if (file) {
this.fileName = file.name; // upload it with HttpClient later
}
}
```
```html
```
Uploading the file to a server is covered in the HTTP chapter.
## Handling User Input
`ngModel` updates the property on every key press. To run your own code when the value changes, split the binding into `[ngModel]` and `(ngModelChange)`.
`(ngModelChange)` fires with the new value each time the user changes the field.
```angular runnable title="ngModelChange runs code on every change"
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
imports: [FormsModule],
template: `
Stored as: {{ coupon }}
{{ message }}
`, }) export class App { coupon = ''; message = 'Try SAVE10'; onCouponChange(value: string) { this.coupon = value.toUpperCase().trim(); this.message = this.coupon === 'SAVE10' ? '✅ 10% discount applied' : 'Code not recognised yet'; } } ``` The handler stores the code in upper case, so `save10` and `SAVE10` are treated the same. ## Handling Multiple Inputs When a form has many fields, keep their values in **one object** instead of separate properties. Bind each field to a property of that object: `[(ngModel)]="address.city"`. One object is easier to validate, reset and send to an API in a single request. ```angular runnable title="Several fields bound to one address object" import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; interface Address { street: string; city: string; pin: string; } @Component({ selector: 'app-root', imports: [FormsModule], template: `Ship to: {{ address.street }}, {{ address.city }} - {{ address.pin }}
`, }) export class App { address: Address = { street: '12 MG Road', city: 'Bengaluru', pin: '560001' }; } ``` ## Form State Tracking Angular tracks the state of every control and of the whole form. Each state is a `true`/`false` property: | Property | `true` when | |---|---| | `pristine` | The user has not changed the value yet | | `dirty` | The user has changed the value | | `untouched` | The user has not left the field yet | | `touched` | The user focused the field and then left it | | `valid` | The value passes all validation rules | | `invalid` | The value fails at least one rule | Angular also adds matching CSS classes to each field, such as `ng-dirty`, `ng-touched` and `ng-invalid`. Style invalid fields with a selector such as `input.ng-invalid.ng-touched`, so the red border appears only after the user has visited the field. ```angular runnable title="Form and field state, updated as you interact" import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-root', imports: [FormsModule], template: `Field: {{ companyField.dirty ? 'dirty' : 'pristine' }}, {{ companyField.touched ? 'touched' : 'untouched' }}, {{ companyField.valid ? 'valid' : 'invalid' }}
Form: {{ f.valid ? 'valid' : 'invalid' }}
`, styles: `input.ng-invalid.ng-touched { border: 2px solid #dc2626; }`, }) export class App { company = 'Acme Ltd'; } ``` Click in the field, delete the text and click outside. The field becomes `dirty`, `touched` and `invalid`, and it gets a red border. ## Form Submission Listen to `(ngSubmit)` on the `{{ status }}
`, }) export class App { email = 'ravi@example.com'; status = 'Not submitted'; send() { this.status = 'Demo requested for ' + this.email; } } ``` ## Resetting Forms `form.reset()` clears every field and returns every control to the `pristine` and `untouched` state. Bound properties become `null`. To reset to specific values instead of empty fields, pass an object: `form.reset({ email: 'default@example.com' })`. To reset in code, read the form with `@ViewChild('f') form!: NgForm;`. ```angular runnable title="reset() clears the fields and the form state" import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-root', imports: [FormsModule], template: `Subject: {{ subject || '(empty)' }} · Form is {{ feedbackForm.dirty ? 'dirty' : 'pristine' }}
`, }) export class App { subject = 'Login page is slow'; message = 'It takes 8 seconds to load.'; } ``` ## Template-Driven Form Best Practices - **Give every field a `name`.** It is required inside a `