This blog represents concepts and code samples which can be used for capturing user inputs from the form in an Angular app using following techniques:
The following depicts the code which needs to be used in template code. Make a note of
<input (keyup)="setFirstname($event)"/>
The following depicts the code which needs to be used in the component code.
setFirstname(event: any) { this.uName = event.target.value; }
The following depicts the code which needs to be used in template code. Make a note of usage of # (hash) with the template reference variable, email. The reference variable, #email, represents the input element.
<input #email (keyup)="setEmail(email.value)"/>
The following depicts the code which needs to be used in the component code.
setEmail(value: string) { this.uEmail = value; }
The following code represents the template file, app.component.html.
<div> <form> <div class="form-group"> <label for="emailField">Email address</label> <input type="email" class="form-control" id="emailField" #email (keyup)="setEmail(email.value)" placeholder="name@example.com"/> </div> <div class="form-group"> <label for="fullname">Name</label> <input class="form-control" id="fullname" (keyup)="setFirstname($event)" placeholder="Full Name"/> </div> </form> </div> <hr/> <ul> <li>Email: {{uEmail}}</li> <li>First name: {{uName}}</li> </ul>
The following code represents the component, namely, app.component.ts.
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public title = 'Angular Forms Tutorial'; uEmail = ''; uName = ''; setEmail(value: string) { this.uEmail = value; } setFirstname(event: any) { this.uName = event.target.value; } }
Greater details can be found on following page, Angular form user inputs. In case you are developing web apps using Spring and Angular, check out my book, Building web apps with Spring 5 and Angular. Grab your ebook today and get started.
Last updated: 7th May, 2024 Linear regression is a popular statistical method used to model…
Last updated: 3rd May, 2024 Have you ever wondered why some machine learning models perform…
Last updated: 2nd May, 2024 The success of machine learning models often depends on the…
When working on a machine learning project, one of the key challenges faced by data…
Last updated: 1st May, 2024 The bias-variance trade-off is a fundamental concept in machine learning…
Last updated: 1st May, 2024 As a data scientist, understanding the nuances of various cost…