v1.0

Client/src/app/input-components/detail-input-view/detail-input-view.component.css

@@ -7,3 +7,7 @@
   width: 40px;
   padding-top: 10px;
 }
+
+textarea.ng-invalid.ng-touched {
+  border: 1px solid red;
+}

Client/src/app/input-components/detail-input-view/detail-input-view.component.html

@@ -31,7 +31,7 @@
         class="form-control"
         [(ngModel)]="displayC.components[index].input"
     ></textarea>
-          <span class="help-block" *ngIf="!inputext.valid && inputext.touched">Username should be between 6 and 12 character long. It should contain only alphabets and digits.</span>
+          <span class="help-block" *ngIf="!inputext.valid && inputext.touched">{{error}}</span>
 
         </form>
       </div>
@@ -41,12 +41,14 @@
 
 <div class="row">
   <div class="col-sm-12" style="padding: 5px">
+    <form [formGroup]="registerForm">
     <textarea
         #input2
+        formControlName="inputext"
         [placeholder]="displayC.components[index].placeholder"
         [style.background]=displayC.components[index].background
         [style.text-align]="displayC.components[index].align"
-        [style.color]=displayC.components[index].textColor
+        [style.color]=displayC.components[index].textcolor
         style="
               display:table-cell;
               width:100%;
@@ -57,5 +59,8 @@
         class="form-control"
         [(ngModel)]="displayC.components[index].input"
     ></textarea>
+      <span class="help-block" *ngIf="!inputext.valid && inputext.touched">{{error}}</span>
+
+    </form>
   </div>
 </div>

Client/src/app/input-components/detail-input-view/detail-input-view.component.ts

@@ -51,37 +51,49 @@ export class DetailInputViewComponent implements OnInit {
       this.ischanged = true;
     }
 
-    if (this.displayC.components[this.index].validatorsMin) {
+    if (this.displayC.components[this.index].validatorsMin >= 0) {
+      console.log('--1--');
       this.error += ('This field should have minimum length of ' + this.displayC.components[this.index].validatorsMin + '\n');
     }
-    if (this.displayC.components[this.index].validatorsMax) {
+    if (this.displayC.components[this.index].validatorsMax >= 0) {
+      console.log('--2--');
       this.error += ('This field should have maximum length of ' + this.displayC.components[this.index].validatorsMax + '\n');
     }
     if (this.displayC.components[this.index].validatorsReq) {
+      console.log('--3--');
       this.error += ('This field is compulsory \n');
     }
     if (this.displayC.components[this.index].validatorsEmail) {
+      console.log('--4--');
       this.error += ('Input valid email \n');
     }
     if (this.displayC.components[this.index].validatorsIsAlphaNumeric) {
+      console.log('--5--');
       this.error += ('Only alphanumerics are allowed \n');
     }
     if (this.displayC.components[this.index].validatorsIsDigit) {
+      console.log('--6--');
       this.error += ('Only digits are allowed \n');
     }
     if (this.displayC.components[this.index].validatorsIsAlphabetic) {
+      console.log('--7--');
       this.error += ('Only alphabets are allowed \n');
     }
     if (this.displayC.components[this.index].validatorsIsSmall) {
+      console.log('--8--');
       this.error += ('Only lowercase alphabets are allowed \n');
     }
     if (this.displayC.components[this.index].validatorsIsCapital) {
+      console.log('--9--');
       this.error += ('Only uppercase alphabets are allowed \n');
     }
     if (this.displayC.components[this.index].validatorsPattern) {
+      console.log('--10--');
       this.error += ('Make sure you enter valid pattern ' + this.displayC.components[this.index].validatorsPattern + '\n');
     }
 
+    console.log(this.error);
+
     console.log('length : ' + (this.displayC.components[this.index].title.trim().length < 1));
     if (this.displayC.components[this.index].title.trim().length < 1) {
       this.discrTemp = 'Click to add header';

Client/src/app/input-components/text-input-view/text-input-view.component.css

@@ -7,3 +7,7 @@
   width: 40px;
   padding-top: 10px;
 }
+
+input.ng-invalid.ng-touched {
+  border: 1px solid red;
+}

Client/src/app/input-components/text-input-view/text-input-view.component.html

@@ -38,12 +38,14 @@
 
 <div class="row">
   <div class="col-sm-12" style="padding: 5px">
+    <form [formGroup]="registerForm">
       <input
           #input2
+          formControlName="inputext"
           [placeholder]="displayC.components[index].placeholder"
           [style.background]=displayC.components[index].background
           [style.text-align]="displayC.components[index].align"
-        [style.color]=displayC.components[index].textColor
+          [style.color]=displayC.components[index].textcolor
           style="
               display:table-cell;
               width:100%;
@@ -53,5 +55,8 @@
           class="form-control"
           [(ngModel)]="displayC.components[index].input"
       />
+      <span class="help-block" *ngIf="!inputext.valid && inputext.touched">{{error}}</span>
+
+    </form>
   </div>
 </div>

Client/src/app/input-components/text-input-view/text-input-view.component.ts

@@ -2,6 +2,7 @@ import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} f
 import {DataService} from '../../../services/data.service';
 import {DisplayComponentService} from '../../../services/display-component.service';
 import {InputComponentService} from '../../../services/input-component.service';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 @Component({
   selector: 'app-text-input-view',
@@ -9,6 +10,9 @@ import {InputComponentService} from '../../../services/input-component.service';
   styleUrls: ['./text-input-view.component.css']
 })
 export class TextInputViewComponent implements OnInit {
+  registerForm: FormGroup;
+
+  error = '';
 
   @Input() index: number;
   private ischanged = false;
@@ -18,7 +22,7 @@ export class TextInputViewComponent implements OnInit {
   private edit = false;
   private discrTemp = '';
 
-  constructor(private data: DataService, private  displayC: DisplayComponentService, private inputC: InputComponentService) { }
+  constructor(private formBuilder: FormBuilder, private data: DataService, private  displayC: DisplayComponentService, private inputC: InputComponentService) { }
 
   ngOnInit() {
     if (this.displayC.components[this.index].valid === false) {
@@ -31,10 +35,61 @@ export class TextInputViewComponent implements OnInit {
       this.displayC.components[this.index].isDetails = true;
       this.displayC.components[this.index].input = '';
       this.displayC.components[this.index].placeholder = '';
+      this.displayC.components[this.index].validatorsMin = 5;
+      this.displayC.components[this.index].validatorsMax = -1;
+      this.displayC.components[this.index].validatorsReq = true;
+      this.displayC.components[this.index].validatorsEmail = false;
+      this.displayC.components[this.index].validatorsIsDigit = false;
+      this.displayC.components[this.index].validatorsIsAlphabetic = false;
+      this.displayC.components[this.index].validatorsIsSmall = false;
+      this.displayC.components[this.index].validatorsIsCapital = false;
+      this.displayC.components[this.index].validatorsIsAlphaNumeric = false;
+      this.displayC.components[this.index].validatorsPattern = null;
     } else {
       this.ischanged = true;
     }
 
+    if (this.displayC.components[this.index].validatorsMin >= 0) {
+      console.log('--1--');
+      this.error += ('This field should have minimum length of ' + this.displayC.components[this.index].validatorsMin + '\n');
+    }
+    if (this.displayC.components[this.index].validatorsMax >= 0) {
+      console.log('--2--');
+      this.error += ('This field should have maximum length of ' + this.displayC.components[this.index].validatorsMax + '\n');
+    }
+    if (this.displayC.components[this.index].validatorsReq) {
+      console.log('--3--');
+      this.error += ('This field is compulsory \n');
+    }
+    if (this.displayC.components[this.index].validatorsEmail) {
+      console.log('--4--');
+      this.error += ('Input valid email \n');
+    }
+    if (this.displayC.components[this.index].validatorsIsAlphaNumeric) {
+      console.log('--5--');
+      this.error += ('Only alphanumerics are allowed \n');
+    }
+    if (this.displayC.components[this.index].validatorsIsDigit) {
+      console.log('--6--');
+      this.error += ('Only digits are allowed \n');
+    }
+    if (this.displayC.components[this.index].validatorsIsAlphabetic) {
+      console.log('--7--');
+      this.error += ('Only alphabets are allowed \n');
+    }
+    if (this.displayC.components[this.index].validatorsIsSmall) {
+      console.log('--8--');
+      this.error += ('Only lowercase alphabets are allowed \n');
+    }
+    if (this.displayC.components[this.index].validatorsIsCapital) {
+      console.log('--9--');
+      this.error += ('Only uppercase alphabets are allowed \n');
+    }
+    if (this.displayC.components[this.index].validatorsPattern) {
+      console.log('--10--');
+      this.error += ('Make sure you enter valid pattern ' + this.displayC.components[this.index].validatorsPattern + '\n');
+    }
+
     console.log('length : ' + (this.displayC.components[this.index].title.trim().length < 1));
     if (this.displayC.components[this.index].title.trim().length < 1) {
       this.discrTemp = 'Click to add header';
@@ -43,7 +98,59 @@ export class TextInputViewComponent implements OnInit {
       this.discrTemp = this.displayC.components[this.index].title.replace(new RegExp('\n', 'g'), '<br />');
     }
     this.displayC.components[this.index].valid = true;
+
+
+    this.registerForm = this.formBuilder.group({
+      inputext: ['',
+        Validators.compose([
+          ExtraValidators.conditional(
+            group => this.displayC.components[this.index].validatorsMin >= 0,
+            Validators.minLength(this.displayC.components[this.index].validatorsMin)
+          ),
+          ExtraValidators.conditional(
+            group => this.displayC.components[this.index].validatorsMax >= 0,
+            Validators.maxLength(this.displayC.components[this.index].validatorsMax)
+          ),
+          ExtraValidators.conditional(
+            group => this.displayC.components[this.index].validatorsReq === true,
+            Validators.required
+          ),
+          ExtraValidators.conditional(
+            group => this.displayC.components[this.index].validatorsEmail === true,
+            Validators.email
+          ),
+          ExtraValidators.conditional(
+            group => this.displayC.components[this.index].validatorsIsDigit === true,
+            Validators.pattern('^[0-9]*$')
+          ),
+          ExtraValidators.conditional(
+            group => this.displayC.components[this.index].validatorsIsAlphabetic === true,
+            Validators.pattern('^[a-zA-Z]*$')
+          ),
+          ExtraValidators.conditional(
+            group => this.displayC.components[this.index].validatorsIsSmall === true,
+            Validators.pattern('^[a-z]*$')
+          ),
+          ExtraValidators.conditional(
+            group => this.displayC.components[this.index].validatorsIsCapital === true,
+            Validators.pattern('^[A-Z]*$')
+          ),
+          ExtraValidators.conditional(
+            group => this.displayC.components[this.index].validatorsIsAlphaNumeric === true,
+            Validators.pattern('^[a-zA-Z0-9]*$')
+          ),
+          ExtraValidators.conditional(
+            group => this.displayC.components[this.index].validatorsPattern !== null
+              && this.displayC.components[this.index].validatorsPattern.length > 0,
+            Validators.pattern(this.displayC.components[this.index].validatorsPattern)
+          ),
+        ])
+      ]
+    });
   }
+  get inputext() { return this.registerForm.get('inputext'); }
+
+
 
   enterEditMode() {
     this.edit = true;
@@ -69,3 +176,18 @@ export class TextInputViewComponent implements OnInit {
     }
   }
 }
+
+
+class ExtraValidators {
+  i = 10; /*!< just a i value */
+  static conditional(conditional, validator) {
+    return (control) => {
+
+      if (control && control._parent) {
+        if (conditional(control._parent)) {
+          return validator(control);
+        }
+      }
+    };
+  }
+}