Open In App

AngularJS | Forms

Last Updated : 31 May, 2019
Like Article

Forms are collection of controls that is input field, buttons, checkbox and these can be validated
real time. As soon as a user of the form completes writing a field and moves to the next one it
gets validated and suggests the user where he might have went wrong.

So a form can be consisting of the many number of controls
However we will be focusing on

  1. Input field
  2. Checkbox
  3. Radiobox
  4. Button
  5. SelectBox(Dropdowns)

1) Input fields:

<input type="text" value="name" ng-model="name" placeholder="name">

Various constraints can be added to make the necessary validations, also we can use place-
holders to predefine the input box for the users convenience so that if the form has an
error than the user does not have to put the right details all over again.

In app.module.ts

import { FormsModule } from '@angular/forms'; 

in the imports list at the beginning and also add the Formsmodule in the following:

  imports: [

Include the above code always while creating forms.
Example #1:
In app.component.html

        <div class="form-group">
            <label for="firstName">Name</label>
            <input type="text" 
        <div class="form-group">
            <label for="email">Email</label>
        <div class="form-group">
            <label for="password">Password</label>
        <div class="form-group">
            <label for="phone">mobile</label>
            ngModel name="phone"
    <p>{{ phone.value }}</p>

To use the values written in the input box we store it in a variable by two way binding.


Checkbox and Select(Dropdowns):
In a form, the variable defined in ngModel is stored with true on getting selected otherwise false.
In Select, the selected value gets stored in the variable defined in the ngModel.

Example #2:
In app.component.html

    <input id="myVar" type="checkbox" ngModel name="myVar" #myVar="ngModel">
    <p>The checkbox is selected: {{myVar.value}}</p>
<br />
    <select ngModel name="mychoice" #myChoice="ngModel">
    <p>The selected option from Dropdown {{ myChoice.value }}</p>


Radio Buttons and Buttons
Radio buttons used in the forms should allow only one field to be selected at a time to make sure this is the
case we should associate it with only ngModel.

Example #3(Radio Button):
In app.component.html

      <p>Select a radio button to know which Vowel it is associated to:</p>
    <input value="A" type="radio" ngModel name="myVar" #myVar="ngModel">
    <input value="E" type="radio" ngModel name="myVar" #myVar="ngModel">
    <input value="I" type="radio" ngModel name="myVar" #myVar="ngModel">
    <input value="O" type="radio" ngModel name="myVar" #myVar="ngModel">
    <input value="U" type="radio" ngModel name="myVar" #myVar="ngModel">
<br/><button *ngIf='myVar.touched'>Submit</button>
<p>You have selected: {{myVar.value}}</p>

In this code, the button will be visible only after selecting one of the radio buttons. However it won’t be visible as soon as you select it since when you on its selection the field touched(being selected atleast once) turns to
true and however it is not getting reflected in the buttons if condition as it is preloaded.
So this button will only be visible once we click anywhere on the screen or we change our selection.

Before Selecting:

After Selecting:

We can add validations to all these input types and make our forms responsive.

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads