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.

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