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
Recent Comments