Angular form handling tutorial

Angular form handling tutorial

In this tutorial, we are going to learn about how to handle the forms in angular by using a template-driven approach.

In template-driven forms we use ngModel directive which creates a two-way data binding between input element and property so that it can correctly update the form elements when a change happens.

To use ngModel directive inside our components, first, we need to configure our app.module.ts file by importing a FormsModule from @angular/forms package and added it to imports array.

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    ChildComponent
  ],
  imports: [
    BrowserModule, FormsModule  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Input element

Let’s see an example of how to handle the input element data by using ngModel directive.

app.component.html
<form class="center">
  <div>
    <label for="name">Name</label>
    <input [(ngModel)]="name" placeholder="Name" name="name"    id="name" type="text" />  </div>
</form>

In the above code, we added an input element with ngModel directive which is attached to the name property so that input element value is in sync with the name property.

app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name: string;
  constructor() { }

}

Radio buttons

Let’s see an example of how to handle radio buttons data.

For radio buttons we need to bind the same property with two radio buttons like in below example we have added a ngModel directive with gender property to both Male and Female radio buttons.

app.component.html
<form class="center">
  <div>
    <input [(ngModel)]="gender" name="gender" id="male"
    type="radio" value="Male" />
    <label for="male">Male</label>
    <input [(ngModel)]="gender" name="gender" id="female"
    type="radio" value="Female" />
    <label for="female">Female</label>
  </div>
  <p>Gender: {{gender}}</p></form>
app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  name: string;
  gender: string;
  constructor() { }
}

radio-btn-example

Checkbox

Single checkbox example

app.component.html
<form class="center">
  <div>
    <input name="newsletter" type="checkbox" id="newsletter"    [(ngModel)]="subscribe" value="newsletter" />    <label for="newsletter">Subscribe to newsletter</label>
  </div>
</form>

In the above code, we have added a directive [(ngModel)]="subscribe" to checkbox so that when a user is checked the subscribe property value is true, for unchecked the value is false.

app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  name: string;
  gender: string;
  subscribe: boolean;
  constructor() {

  }
}

Multiple checkboxes example

In some cases, we need to handle multiple checkboxes like choosing favorite games or hobbies in such cases we need to create a group of properties and attach them to each checkbox.

app.component.html
<form class="center">
  <h1>Choose your favorite games</h1>
  <div>
    <input name="cricket" type="checkbox" id="cricket"    [(ngModel)]="games.cricket" value="cricket" />    <label for="cricket">Cricket</label>
  </div>
  <div>
    <input name="football" type="checkbox" id="football"    [(ngModel)]="games.football" value="football" />    <label for="football">Football</label>
  </div>

  <!-- output -->
  <p>Cricket :{{games.cricket}}</p>
  <p>Football: {{games.football}}</p>

</form>
app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  name: string;
  gender: string;
  subscribe: boolean;
  games = {    cricket: null,    football: null,  };
  constructor() {

  }
}

angular-multiple-checkbox-example

Textarea element example

app.component.html
<form class="center">
  <div>
    <textarea [(ngModel)]="feedback" name="feedback"     placeholder="Enter your feedback">    </textarea>  </div>

  <!-- output -->
  <p>Feedback: {{feedback}}</p>
</form>
app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  name: string;
  gender: string;
  subscribe: boolean;
  games = {
    cricket: null,
    football: null,
  };
  feedback: string;
  constructor() {

  }
}

text-area-element-example

Select element example

Let’s see how to handle select element form data.

In the below code, we have attached ngModel directive to property country so that whatever option we choose is added to the country property value.

app.component.html
<form class="center">
  <div>
    <select name="country" id="country" [(ngModel)]="country">      <option value="" disabled>Select your country</option>
      <option value="India">India</option>
      <option value="Usa">Usa</option>
      <option value="Uk">Uk</option>
      <option value="Germany">Germany</option>
    </select>
  </div>

  <!-- output -->
  <p>Selected country is - {{country}}</p>
</form>
app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  name: string;
  gender: string;
  subscribe: boolean;
  games = {
    cricket: null,
    football: null,
  };
  feedback: string;
  country = '';
  constructor() {
  }
}

select-element-example

Form submission

To submit a form we can do it by adding a button with event handler method but angular offers us a ngSubmit event property for submitting the form.

<form class="center" (ngSubmit)="onSubmit()">
  <!-- your form elements goes here -->
  <button type="submit">Submit</button>
</form>