feat: add Template Driven forms

Author: sirajc

src/app/forms/template/template.component.html

@@ -1,39 +1,39 @@
 <div class="container">
-  <form novalidate>
+  <form #form="ngForm" (ngSubmit)="signUp(form.value)" novalidate>
     <div class="card card-signup">
       <div class="card-header">Profile</div>
       <div class="card-block">
         <div class="form-group row">
           <label for="inputEmail" class="col-sm-3 col-form-label">Email*</label>
           <div class="col-sm-9">
             <input type="email" class="form-control" id="inputEmail3" placeholder="[email protected]"
-             name="email" required minlength="5">
+              ngModel labsEmailValidator name="email" required minlength="5">
           </div>
         </div>
         <div class="form-group row">
           <label for="inputFirstName" class="col-sm-3 col-form-label">First Name*</label>
           <div class="col-sm-9">
             <input type="text" class="form-control" id="inputFirstName" placeholder=""
-            name="firstName" required maxlength="25">
+              ngModel pattern="[A-Za-z .]*" name="firstName" required maxlength="25">
           </div>
         </div>
         <div class="form-group row">
           <label for="inputLastName" class="col-sm-3 col-form-label">Last Name</label>
           <div class="col-sm-9">
             <input type="text" class="form-control" id="inputLastName" placeholder=""
-              name="lastName" maxlength="25">
+              ngModel name="lastName" maxlength="25">
           </div>
         </div>
         <fieldset class="form-group row">
           <legend class="col-form-legend col-sm-3">Gender</legend>
           <div class="col-sm-9  form-radio">
             <label class="custom-control custom-radio">
-              <input id="inputMale" name="gender" type="radio" class="custom-control-input">
+              <input id="inputMale" ngModel value="Male" name="gender" type="radio" class="custom-control-input">
               <span class="custom-control-indicator"></span>
               <span class="custom-control-description">Male</span>
             </label>
             <label class="custom-control custom-radio">
-              <input id="inputFemale" name="gender" type="radio" class="custom-control-input">
+              <input id="inputFemale" ngModel name="gender"value="Female" type="radio" class="custom-control-input">
               <span class="custom-control-indicator"></span>
               <span class="custom-control-description">Female</span>
             </label>
@@ -42,7 +42,8 @@
         <div class="form-group row">
           <div class="offset-sm-3 col-sm-9">
             <label class="custom-control custom-checkbox">
-              <input type="checkbox" name="notrobot" class="custom-control-input" required>
+              <input type="checkbox" ngModel name="notrobot"
+              class="custom-control-input" required labsCheckboxCheckedValidator>
               <span class="custom-control-indicator"></span>
               <span class="custom-control-description">I am not a Robot*</span>
             </label>
@@ -52,54 +53,54 @@
     </div>
     <div class="card card-signup">
       <div class="card-header">Address</div>
-      <div class="card-block">
+      <div class="card-block" ngModelGroup="address">
         <div class="form-group row">
           <label for="inputAddressLine1" class="col-sm-3 col-form-label">Address Line 1*</label>
           <div class="col-sm-9">
             <input type="text" class="form-control" id="inputAddressLine1" placeholder="Room/Flat/Plot No. Locality"
-              name="addressLine1" required>
+              ngModel name="addressLine1" required>
           </div>
         </div>
         <div class="form-group row">
           <label for="inputAddressLine2" class="col-sm-3 col-form-label">Address Line 2</label>
           <div class="col-sm-9">
             <input type="text" class="form-control" id="inputAddressLine2" placeholder="Street, Area"
-              name="addressLine2">
+              ngModel name="addressLine2">
           </div>
         </div>
         <div class="row">
           <div class="form-group">
             <label for="inputCity" class="col-sm-3 col-form-label">City*</label>
             <div class="col-sm-4">
               <input type="text" class="form-control" id="inputCity" placeholder="City"
-               name="city" required>
+               ngModel name="city" required>
             </div>
           </div>
           <div class="form-group">
             <label for="inputZipCode" class="col-sm-1 col-form-label">Zip*</label>
             <div class="col-sm-4">
               <input type="number" class="form-control" id="inputZipCode" placeholder="Zip code"
-               name="zipCode" required>
+               ngModel name="zipCode" required>
             </div>
           </div>
         </div>
         <div class="form-group row" style="margin-top:1.2rem">
           <label for="inputLandmark" class="col-sm-3 col-form-label">Landmark</label>
           <div class="col-sm-9">
             <input type="text" class="form-control" id="inputLandmark" placeholder="Landmark"
-             name="landmark" >
+             ngModel name="landmark" >
           </div>
         </div>
         <fieldset class="form-group row">
             <legend class="col-form-legend col-sm-3">Type</legend>
             <div class="col-sm-9 form-radio">
               <label class="custom-control custom-radio">
-                <input id="inputResidence" name="addressType" type="radio" class="custom-control-input">
+                <input id="inputResidence" ngModel name="addressType" value="Residence" type="radio" class="custom-control-input">
                 <span class="custom-control-indicator"></span>
                 <span class="custom-control-description">Residence</span>
               </label>
               <label class="custom-control custom-radio">
-                <input id="inputOffice" name="addressType" type="radio" class="custom-control-input">
+                <input id="inputOffice" ngModel name="addressType" value="Office" type="radio" class="custom-control-input">
                 <span class="custom-control-indicator"></span>
                 <span class="custom-control-description">Office</span>
               </label>
@@ -109,7 +110,7 @@
           <div class="form-group">
             <label for="inputCountry" class="col-sm-3 col-form-label">Country</label>
             <div class="col-sm-6">
-              <select class="custom-select" id="inputCountry" name="country">
+              <select class="custom-select" id="inputCountry" name="country" ngModel>
                   <option value="" selected>Select Country</option>
                   <option value="ALA">Åland Islands</option>
                   <option value="ALB">Albania</option>
@@ -365,10 +366,14 @@
         </div>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="row">
       <div class="offset-sm-2 col-sm-9">
-        <button type="submit" class="btn btn-primary">Sign up</button>
+        <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Sign up</button>
+        Your form is {{form.valid ? 'valid' : 'invalid'}}
       </div>
     </div>
   </form>
 </div>
+
+
+<div class="jumbotron">{{form.value | json}}</div>

src/app/forms/template/template.component.ts

@@ -4,4 +4,8 @@ import { Component } from '@angular/core';
   selector: 'labs-template',
   templateUrl: 'template.component.html'
 })
-export class TemplateComponent {}
+export class TemplateComponent {
+  signUp(data: any) {
+    console.log('Submit the data: ', data);
+  }
+}

src/app/forms/template/template.module.ts

@@ -1,10 +1,20 @@
 import { NgModule } from '@angular/core';
-import { TemplateComponent } from './template.component.ts';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
+import { TemplateComponent } from './template.component.ts';
 import { moduleRoutes } from './template.routes.ts';
+import { Bootstrap4FormsModule } from '../../shared/bootstrap4/forms';
+import { ValidatorsModule } from '../../shared/validators';
 
 @NgModule({
-  imports: [ moduleRoutes ],
+  imports: [
+    moduleRoutes,
+    CommonModule,
+    FormsModule,
+    Bootstrap4FormsModule,
+    ValidatorsModule
+  ],
   declarations: [ TemplateComponent ]
 })
-export class TemplateModule {}
+export class TemplateModule { }