ANGULAR FORMS

Our application mostly depends on HTML and we are mostly on forms that will help us to develop and to interact with users. I am sharing here whatever I understand from my knowledge

Forms are most important when we are building applications. Sign-up, Login are some of them and there are a lot of other communications happens through HTML forms in most of the web application.

This is why it is very important to give a good and user-friendly form to all the users. Like User Interface, form communications while saving data, validations are one of the aspects that we need to be taken care of while developing user interface forms to attracts all the users.

Types of forms in Angular 

There are two types of forms angular provide. The first one is template driven and next is the reactive approach.

Template-driven forms

This type of form are highly dependent on a template that is driven by the app.

Let us create a simple HTML form using the template driven method.

Now we can see that we have already used ngSubmit method which will call a component method.

We have used a reference variable which will be useful while passing the form object.

<form (ngSubmit)="onSubmit(event)" #basic="ngForm">
    <div class="form-group">
      <label>First Name</label>
      <input type="text"
             class="form-control"
             ngModel
             name="firstName">
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input type="text"
             class="form-control"
             ngModel
             name="lastName">
    </div>
    <div>
      <button type="submit">Submit</button>     
    </div>
</form>

Now in the current component, we need a method to get the data once form submitted.

Check the console log, this will show us the full object of our HTML form passed by Angular.

onSubmit(form: NgForm){
  console.log(form);
}

Let us see how we can apply the basic validations.

I am using the template-driven approach because now everything is completely dependent on the templates only.

Here, we have applied the required.

 <input type="text"
             class="form-control"
             [(ngModel)]="model.firstName"
             name="firstName"
             #firstName="ngModel"
             required/>

We can show the validation errors in the UI by using valid and touched methods of Angular.

<span *ngIf="!firstName.valid && firstName.touched">
Please enter first name!
</span>

Model-driven forms

As the name suggests, this type of form is driven by models in angular.

Let us see how both reactive approach and Template driven approach are different

The current approach is normally used to create model-based forms. Now it is different than what we saw in the template-driven approach.

Two things that we mainly used are FormGroup and FormControl which is used to generate the elements.

<h2>Welcome to the Angular Forms Tutorial</h2>
<form [formGroup]="simpleForm" (ngSubmit)="saveData()">
<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <label for="name">Name: </label>
      <input type="text" formControlName="name" class="form-control">
    </div>
    <p class="help-block" *ngIf="!simpleForm.get('name').valid && simpleForm.get('name').touched">Please enter name.</p>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <label for="desc">Desc: </label>
      <input type="text" formControlName="desc" class="form-control">
    </div>
    <p class="help-block" *ngIf="!simpleForm.get('desc').valid && simpleForm.get('desc').touched">Please enter desc.</p>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <label for="age">Age: </label>
      <input type="text" formControlName="age" class="form-control">
    </div>
    <p class="help-block" *ngIf="!simpleForm.get('age').valid && simpleForm.get('age').touched">Please enter age.</p>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <label for="school">School: </label>
      <input type="text" formControlName="school" class="form-control">
    </div>
    <p class="help-block" *ngIf="!simpleForm.get('school').valid && simpleForm.get('school').touched">Please enter school.</p>
  </div>
</div>
<div class="row">
  <div class="col-md-10">
    <div class="form-group">
      <button class="btn btn-primary" type="Submit" [disabled]="!simpleForm.valid">Submit</button>
    </div>  
  </div>
</div>
</form>
</div>

Let us create a new component which drives the forms dynamically

In the current component, we have used FormGroup which has a list of FormControls already.

The amazing thing is, we can use all the inbuilt validators here which are already provided the validation to form component only.

ngOnInit() {
    this.simpleForm = new FormGroup({
      'name': new FormControl(null, Validators.required),
      'desc': new FormControl(null, Validators.required),
      'age': new FormControl(null, Validators.required),
      'school': new FormControl(null, Validators.required),
    });
}

Here, Please don`t forget to inject all the required dependencies like FormGroup, FormControl, and FormModule.

Now, you understood how to use the forms important in the angular web application.