Categories

Monday, May 20, 2024
#919814419350 therichposts@gmail.com
AngularAngular 16Bootstrap 5

How to get and set form input field value in angular 16?

How to get and set form input field value in angular 16?

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to get and set form input field value in angular 16?

Guys in this demo I am using ngModel two way data-binding to get and set input field value and I found this is very simple way.

Working Demi
How to get and set form input field value in angular 16?
How to get and set form input field value in angular 16?

Angular16 came and if you are new then you must check below link:

  1. Angular 16 Tutorials

Guys to include Bootstrap 5 into our Angular 16 application please see below tutorial link:


Here is the code snippet and please use carefully:

1. Very first guys, here are common basics steps to add angular 16 application on your machine and also we must have latest nodejs version installed for angular 16:

$ npm install -g @angular/cli

$ ng new angularform // Set Angular 16 Application on your pc

cd angularform // Go inside project folder

2. Now guys we will add below code into our angularform/src/app/app.module.ts file:

...

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
   ...
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Now guys we will add below code into our angularform/src/app/app.component.ts file and main functionality is this:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularexpert';
  email = "";
  getValue()
  {
    alert(this.email);
  }
  setValue()
  {
    this.email = "jassa@gmail.com"
  }
}

4. Now guys we will add below code into our angularform/src/app/app.component.html file and watch on web:

<div class="container p-5">
 <form>
  <div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" name="email" [(ngModel)]="email">
  </div>
  <h3>{{email}}</h3>
  <button class="btn btn-primary me-3" (click)="getValue()">Get Value</button>
  <button class="btn btn-primary" (click)="setValue()">Set Value</button>
 </form>
  
</div>

Now we are done friends and please run ng serve command to check the output in browser(locahost:4200) and if you have any kind of query then please do comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding please watch video above.

Guys I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.