AngularJS | Forms

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:
Syntax:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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: [
    BrowserModule,
    FormsModule,
  ],

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

Output:
input

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

filter_none

edit
close

play_arrow

link
brightness_4
code

  <form>
    <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">
        <option>A</option>
        <option>E</option>
        <option>I</option>
        <option>O</option>
        <option>U</option>
    </select>
    <p>The selected option from Dropdown {{ myChoice.value }}</p>
</form>

chevron_right


Output
select

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<form>
      <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>
</form>
<p>You have selected: {{myVar.value}}</p>

chevron_right


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:
radio1

After Selecting:
radio2

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



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.