https://github.com/dennisxzx/angular-template-driven-form-example

https://github.com/dennisxzx/angular-template-driven-form-example

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/dennisxzx/angular-template-driven-form-example
• Owner: dennisXZX
• Created: 2019-09-17T22:09:19.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T09:49:16.000Z (about 2 years ago)
• Last Synced: 2024-10-28T17:39:14.222Z (3 months ago)
• Language: TypeScript
• Size: 1.65 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 26
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### Angular Template Driven Form Example

In order to use Angular template driven form, you need to first import `FormsModule` into your Angular app.

When you have the `FormsModule` imported, Angular would look for  tag and internally add an `NgForm` directive `` and create an instance of `NgForm`. You can access this instance by using a template reference ``

To hook up a form input with the `ngForm` instance, you need to add `NgModel` to the form input and also give it a `name` attribute.

However, if you need to enable two-way data binding, you would need to use the `[(ngModel)]="userSettings.name"` in the template.

### Validation

Angular form comes with these CSS classes for validation purpose.

- `ng-untouched` and `ng-touched`

- `ng-pristine` (unmodified) and `ng-dirty` (modified)

- `ng-valid` and `ng-invalid`

Also `NgModel` has properties associated with the CSS classes, for example, `userSettingsForm.valid` and `userSettingsForm.untouched`.