• All the courses

• Course information

TIPS

👉 Assignment example of using Forms in Angular (video)+ codes. 👉 Project using Form : codes.

Why Forms in Angular?

Because your app is SVC (single-view-component) → when you submit a form, how can web do it? → that's why angular need a special "things" for forms.

• Get input values by the users
• Check the valid of input
• Styling conditionally the form

Left: HTML form → Right: key-value object can be submitted with the form.

2 approaches with forms

• Template driven ← inferred from DOM (html)
• Reactive ← form created programmatically and synchronized with the DOM → more controls

Template-driven form

👉 Codes for this section.

Everything you wanna do → do it in the template ← template-driven!!!!

Create a TD form

The form here don't make any HTML request. ← <form> has no attribute!

// make sure
// app.module.ts
import { FormsModule } from '@angular/forms';

@NgModule({
	imports: [
		FormsModule // with this, angular will auto create form based on <form> in html
	]
})
export ...

Angular doesn't recognize auto elements of <form> (label, input,...) because there may be some inputs which aren't served when submitting a form (their functions are different from a function of a form but they're inside <form>) → ==need to tell angular which ones to be extra controlled?==