added external valitors in reactive form example

varun07 · Aug 21, 2017 · 2dc3d68 · 2dc3d68
1 parent 9bd3c6b
commit 2dc3d68
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/src/app/components/custom-input/custom-input.component.ts b/src/app/components/custom-input/custom-input.component.ts
@@ -19,7 +19,7 @@ import { FormBuilder, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Va
     ]
 })
 export class CustomInputComponent implements ControlValueAccessor, Validator, OnInit {
-    private _internalValidationEnabled: boolean = true;
+    private _internalValidationEnabled: boolean = false;
     private textPattern: string = '[a-zA-Z]+';
 
     ngOnInit() {

diff --git a/src/app/demos/custom-form-control/custom-form-control.component.html b/src/app/demos/custom-form-control/custom-form-control.component.html
@@ -11,15 +11,15 @@ <h5>Textbox 1 errors</h5>
   <pre>{{ model.errors | json}}</pre>
 
   <div class="form-group">
-    <label class="col-sm-2 col-form-label">With ngModel:</label>
+    <label class="col-sm-2 col-form-label">With ngModel (external validator):</label>
     <custom-input name="testComponent-2" [ngModel]="modelValue1" [internalValidation]="currentInternalValidation" #model1="ngModel"
       pattern="[a-zA-Z]+"></custom-input>
   </div>
 
   <br />
   <h5>Textbox 2 errors</h5>
   <pre>{{ model1.errors | json}}</pre>
-  
+
   <div class="form-group">
     <label class="col-sm-2 col-form-label">Without ngModel:</label>
     <custom-input name="testComponent-1" value="hello1" [internalValidation]="currentInternalValidation"></custom-input>
@@ -37,13 +37,22 @@ <h5>Form Status</h5>
 <pre>{{ form1.valid | json}}</pre>
 
 
-
-
-
 <h3>Reactive Forms</h3>
 <form [formGroup]="customForm" novalidate>
   <div class="form-group">
+    <label class="col-sm-6col-form-label">With Internal Validation initially off and without external validation</label>
     <custom-input name="testComponent1" [internalValidation]="currentInternalValidation1" formControlName="myCustomInput"></custom-input>
+    <br />
+    <h5>Textbox errors</h5>
+    <pre>{{ customForm.get('myCustomInput').errors | json}}</pre>
+  </div>
+
+  <div class="form-group">
+    <label class="col-sm-6 col-form-label">ExternalValidator and internal validation turned off</label>
+    <custom-input name="testComponent1-1" formControlName="myCustomInput2"></custom-input>
+    <br />
+    <h5>Textbox errors</h5>
+    <pre>{{ customForm.get('myCustomInput2').errors | json}}</pre>
   </div>
   <button (click)="buttonClick1()" class="btn btn-dark">Change Validation</button>
 </form>

diff --git a/src/app/demos/custom-form-control/custom-form-control.component.ts b/src/app/demos/custom-form-control/custom-form-control.component.ts
@@ -27,6 +27,7 @@ export class CustomFormControlComponent implements OnInit {
   }
 
   customForm = new FormBuilder().group({
-    myCustomInput: ''
+    myCustomInput: '',
+    myCustomInput2: ['', Validators.required]
   })
 }