Categories

Friday, October 4, 2024
#919814419350 therichposts@gmail.com
Angular 8Angular 9Angular7Bootstrap 4

Angular 9 – how to fetch form data?

Angular 9, Angular 10

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

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.