Angular 8Angular 9Angular7Bootstrap 4

Angular 9 – how to fetch form data?

Angular 9 - Http request with body and headers
Views

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 – how to fetch form data?

Post Working:

In this post, I am showing you, how we can get form input values on button click in our Angular 9 application. Also, you can, I have also applied validation on form input. In this post, I have done with Form validations, Binding form data and collectiong form data.

Here is the working code snippet and please follow carefully:

1. Here is my form code and that I have made into my app.component.html file:

<!-- Here is my Angular 9 reactive form and I have added validations on it. For getting input fields values, I am using formControName -->
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" class="form-control" placeholder="Enter name" id="name" formControlName="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }">
  <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
      <div *ngIf="f.name.errors.required">Name is required</div>
  </div>
  </div>
  <div class="form-group">
    <label for="pwd">Email:</label>
    <input type="email" class="form-control" placeholder="Enter email" id="email" formControlName="email" [ngClass]="{ 'is-invalid': submitted && f.email.errors }">
  <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
    <div *ngIf="f.email.errors.required">Email is required</div>
      <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
   </div>
  </div>
  <div class="form-group">
    <label for="phone">Phone:</label>
    <input type="text" class="form-control" placeholder="Enter phone" id="phone" formControlName="phone" [ngClass]="{ 'is-invalid': submitted && f.phone.errors }">
  <div *ngIf="submitted && f.phone.errors" class="invalid-feedback">
      <div *ngIf="f.phone.errors.required">Phone is required</div>
  </div>
  </div>
  
  <button type="submit" class="btn btn-primary mb-3">Submit</button>
</form>

 

2. Here is my app.component.ts file, in this file, I am getting values and I also, I have applied validation on form input fields. I personally say one thing that applying validation on form in Angular is very easy, we just need to add one line of code:

A FormGroup aggregates the values of each child FormControl into one object, with each control name as the key. It calculates its status by reducing the status values of its children. For example, if one of the controls in a group is invalid, the entire group becomes invalid.

FormControl is used to track values and validation of a form control and FormControlName is used with FormGroup with a <form> tag.

...
import { FormGroup, FormControl, Validators} from '@angular/forms';
...
export class AppComponent implements OnInit {
  registerForm: FormGroup;
  submitted = false;
  name:string;
  email:string;
  phone:string;
  
  get f() { return this.registerForm.controls; }
  onSubmit() {
  this.submitted = true;
        // stop here if form is invalid
        if (this.registerForm.invalid) {
    
              return;
        }
    else
    {
    // Here is the method to get form input fields values and you can assign these value to your custom variables
     this.name  = this.registerForm.value.name
     this.email = this.registerForm.value.email
     this.phone = this.registerForm.value.phone
   
    }
    }
  ngOnInit(): void {
  // Here is the validation code for form inputs
  
  this.registerForm = this.formBuilder.group({
            name: ['', Validators.required],
            phone: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]]
        });
  }

}

 

This is it and if you have any kind of query then please do comment below.

Jassa

Thank you

Ajay Malhotra
the authorAjay Malhotra
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 2, Angular 6, Angular 7, Angular 8, Angular 9, Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

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

Positive SSL