config(EJ2-5149): commit for adding description in form-validator master

Author: pipeline

src/form-validator/default-plnkr.json

@@ -16,10 +16,12 @@ export class DefaultFormValidatorComponent implements OnInit {
 
     ngOnInit(): void {
         this.formValidator = {
+            // Initialize custom placement
             customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
                 inputElement.parentElement.appendChild(errorElement);
             }
         };
+        // Initialize form-validator
         let formObj: FormValidator;
         formObj = new FormValidator('#formId', this.formValidator);
     }

src/form-validator/default.component.ts

@@ -145,12 +145,13 @@
     </div>
 </div>
 <div id="description">
+    <div class="description-header">Description</div>
     <p>
-        FormValidator can be used to validate form input elements with the required validation rules.
+        Form Validator can be used to validate the form input elements with the required validation rules.
     </p>
     <br>
     <p>
-        The above form is configured with following rules and also we have given example valid values for each field.
+        The above form is configured with the following rules and also, we have given the examples of valid values for each field.
     </p>
     <table style="width:100%">
         <tr>
@@ -160,27 +161,27 @@
         </tr>
         <tr>
             <td>Required</td>
-            <td>The field must have any value</td>
+            <td>The field must have any value.</td>
             <td>value</td>
         </tr>
         <tr>
             <td>Email</td>
-            <td>The input must have email format</td>
-            <td>test@syncfusion.com</td>
+            <td>The input must have email format.</td>
+            <td>info@syncfusion.com</td>
         </tr>
         <tr>
             <td>URL</td>
-            <td>The input must have URL format</td>
-            <td>https://www.google.co.in/</td>
+            <td>The input must have URL format.</td>
+            <td>https://www.syncfusion.com/</td>
         </tr>
         <tr>
             <td>Date</td>
-            <td>The input must have javascript date format</td>
+            <td>The input must have JavaScript date format.</td>
             <td>04/13/2017</td>
         </tr>
         <tr>
             <td>Date ISO</td>
-            <td>The input must have date ISO format</td>
+            <td>The input must have date ISO format.</td>
             <td>2017-04-13</td>
         </tr>
         <tr>
@@ -190,43 +191,61 @@
         </tr>
         <tr>
             <td>Digits</td>
-            <td>The input must have digit format</td>
+            <td>The input must have digit format.</td>
             <td>1</td>
         </tr>
         <tr>
             <td>Max Length</td>
-            <td>The input value must have less than 5 characters length</td>
-            <td>test</td>
+            <td>The input value must have less than 5 characters length.</td>
+            <td>world</td>
         </tr>
         <tr>
             <td>Min Length</td>
-            <td>The input value must have more than 5 characters length</td>
-            <td>testing</td>
+            <td>The input value must have more than 5 characters length.</td>
+            <td>syncfusion</td>
         </tr>
         <tr>
             <td>Range Length</td>
-            <td>The input must have number value from 5 to 10 characters length</td>
-            <td>testing</td>
+            <td>The input must have number value from 5 to 10 characters length.</td>
+            <td>syncfusion</td>
         </tr>
         <tr>
             <td>Max</td>
-            <td>The input must have number value less than or equal to 5</td>
+            <td>The input must have number value less than or equal to 5.</td>
             <td>4</td>
         </tr>
         <tr>
             <td>Min</td>
-            <td>The input must have number value greater than or equal to 5</td>
+            <td>The input must have number value greater than or equal to 5.</td>
             <td>6</td>
         </tr>
         <tr>
             <td>Regex</td>
-            <td>You can use regex to validate the input. The input must be alphabets</td>
-            <td>abc</td>
+            <td>You can use regex to validate the input. The input must be alphabets only.</td>
+            <td>contact</td>
         </tr>
     </table>
     <br>
     <p>
-        You can enter the above values in the corresponding input elements and click the subit button to validate the form. The reset
-        button can wipe out all the input values in the form.
+        You can enter the above values in the corresponding input elements and click the submit button to validate the form. The
+        reset button can wipe out all the input values in the form.
     </p>
-</div>
+</div>
+
+<style>
+    .e-error,
+    .e-float-text {
+        font-weight: 500;
+    }
+
+    table,
+    td,
+    th {
+        padding: 5px;
+    }
+
+    .form-horizontal .form-group {
+        margin-left: 0px;
+        margin-right: 0px;
+    }
+</style>

src/form-validator/default.html

@@ -8,7 +8,7 @@ export const formValidatorAppRoutes: Object[] = [
         path: ':theme/form-validator/default',
         component: DefaultFormValidatorComponent,
         name: 'Default Functionalities',
-        category: 'Form-Validator'
+        category: 'Form Validator'
     }
 ];
 

src/form-validator/form-validator.module.ts

@@ -1535,4 +1535,14 @@ propertye pane
 
 .sb-hide {
     display: none;
-}
+}
+
+/* Description Format */
+
+#description {
+    margin: 30px;
+    padding: 15px;
+    background: #f0f0f0;
+    border: 1px solid #dddddd;
+    display: block;
+}