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
- Template driven ā inferred from DOM (html)
- Reactive ā form created programmatically and synchronized with the DOM ā more controls
š Codes for this section.
Everything you wanna do ā do it in the template ā template-driven!!!!
The form here don't make any HTML request. ā
<form> has no attribute!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?==š Codes for this section.
We can actually see what users entered.
Get the values user entered:
form.valueform.controlsā several properties to control the form.
form.dirty:trueif we changed something in the form.
form.invalid/form.valid: if we add some invalidator / validator (to check the fields), this can be true or false.
- Read more in official doc.
š Codes for this section.
With
#f (local ref), we can use @ViewChild. ā Useful when you wanna access the form not only at the time you submit it but also earlier!š Codes for this section.
There are 2 places for
.valid information ā form.valid and form.controls.email.validWhen it's invalid (after clicking on submit) or valid ā angular auto add classes to the html element ā we can use these class to style our element!
Enable HTML5 validation (by default, Angular disables it) ā
ngNativeValidateš Codes for this section.
Using 1-way binding / property binding (
[ngModel]) to set the default value.Before, the check only performed after clicking "Submit" ā If you wanna check "lively" ā Using two-way binding
[(NgModel)]- 0-way binding,
NgModelā tell angular that this input is a control
- 1-way binding,
[NgModel]ā get this control a default value
- 2-way binding,
[(NgModel)]ā Instantly out / do whatever you want with that value
In a big form, we need to "group" some values into a group / validate some specific group of inputs.
After submit: instead of getting
form.value.email, but getting form.value.userData.email (and also form.controls.userData)š Codes for this section.
(video) With this HTML file
š Codes for this section.
Create the form programmatically (not from scratch).
š Codes for this section + Video.
š Codes for this section.
FormGroupā a form, in the end, it's just a group of controls.
- We don't need
FormsModuleinapp.module.ts(it's for template-driven form) ā NEEDReactiveFormsModule
- We don't need local reference anymore.
- We configure all things in the typescript code (
component.ts)
š Codes for this section.
FormGroup inside FormGroup.š Codes for this section.
Let the user dynamically add their form controls (we don't know yet there are how many controls there) ā using an array of form.
Get access to
FormArrayš Codes for this section.
Get access directly to the FormControl using
.get()š Codes for this section.
Suppose that we don't want users use some specific names.
š Codes for this section.
(video) Suppose we wanna check "already-taken" emails from the server.
.statusChanges ā gives the status of the form (INVALID, VALID, PENDING,...).valueChanges ā change something in the form (eg. typing something).Reset the form,