Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Collins Mutai
Collins Mutai

Posted on

Template driven forms in Angular

To use template driven approach to handle forms. We assign a name to the form using the NgForm directive. We then use a submit event handler, to listen to a submit event. Since our form button is of type submit, a submit event is triggered every time a user submits the form.

<form (submit)="onAddPost(postForm)" #postForm="ngForm">    <input type="text" ngModel name="title" #title="ngModel">    <textarea rows="4" ngModel name="content"  #content="ngModel"></textarea>    <button type="submit"> Save Post </button> </form>
Enter fullscreen modeExit fullscreen mode

The NgForm creates an instance of the form and binds to the form in the template. To access the forms inputs we call the form instance and its value property.

onAddPost(form: NgForm) {    console.log(form, form.value, form.value.title, form.value.content);}
Enter fullscreen modeExit fullscreen mode

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Hi,My name is Collins Mutai. I'm a Web Developer based in Nairobi, Kenya. I like UI/UX, Web Design, WordPress Development, and Full Stack Web Development.
  • Location
    Nairobi, Kenya
  • Work
    Web Developer
  • Joined

More fromCollins Mutai

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp