feat: Prepare for Model driven forms

* Bootstrap4Module's directives now supports both Template and ModelDriven
* Attempt to reuse Email and Checkbox validator as ValidatorFn

Author: sirajc

src/app/shared/bootstrap4/forms/form-control-status.directive.ts

@@ -1,21 +1,29 @@
-import { Directive, HostBinding } from '@angular/core';
-import { FormControl, NgModel } from '@angular/forms';
+import { AfterViewInit, Directive, HostBinding, ContentChild } from '@angular/core';
+import { NgModel, AbstractControl, FormControlName } from '@angular/forms';
 
 // tslint:disable-next-line
-@Directive({selector: '[ngModel]'})
-export class FormControlStatusDirective {
+@Directive({selector: '[ngModel],[formControlName]'})
+export class FormControlStatusDirective implements AfterViewInit {
 
-  private control: FormControl;
+  @ContentChild(NgModel) private input: NgModel;
+  @ContentChild(FormControlName) private formControl: FormControlName;
+  private control: AbstractControl;
 
-  constructor(ngModel: NgModel) {
-    this.control = ngModel.control;
+  constructor() {}
+
+  ngAfterViewInit() {
+    if (this.input) {
+      this.control = this.input.control;
+    } else if (this.formControl) {
+      this.control = this.formControl.control;
+    }
   }
 
   @HostBinding('class.form-control-success') get valid() {
-    return this.control.dirty && this.control.valid;
+    return !this.control ? false : this.control.dirty && this.control.valid;
   }
 
   @HostBinding('class.form-control-danger') get invalid() {
-    return this.control.touched && this.control.invalid;
+    return !this.control ? false : this.control.touched && this.control.invalid;
   }
 }

src/app/shared/bootstrap4/forms/form-group-has-status.directive.ts

@@ -1,17 +1,22 @@
 import { Directive, HostBinding, ContentChild, AfterViewInit } from '@angular/core';
-import { FormControl, NgModel } from '@angular/forms';
+import { AbstractControl, NgModel, FormControlName } from '@angular/forms';
 
 // tslint:disable-next-line
 @Directive({selector: 'div.form-group,fieldset.form-group'})
 export class FormGroupHasStatusDirective implements AfterViewInit {
 
   @ContentChild(NgModel) input: NgModel;
-  private control: FormControl;
+  @ContentChild(FormControlName) formControl: FormControlName;
+  private control: AbstractControl;
 
   constructor() {}
 
   ngAfterViewInit() {
-    this.control = this.input && this.input.control;
+    if (this.input) {
+      this.control = this.input.control;
+    } else if (this.formControl) {
+      this.control = this.formControl.control;
+    }
   }
 
   @HostBinding('class.has-success') get valid() {

src/app/shared/validators/checkbox-checked.validator.ts

@@ -1,6 +1,11 @@
 import { Directive, forwardRef } from '@angular/core';
 import { FormControl, NG_VALIDATORS } from '@angular/forms';
 
+export class CheckboxValidator {
+  static checked(c: FormControl) {
+    return new CheckboxCheckedValidator().validate(c);
+  }
+}
 
 @Directive({
   // tslint:disable-next-line

src/app/shared/validators/email.validator.ts

@@ -1,7 +1,7 @@
 import { Directive, forwardRef } from '@angular/core';
 import { NG_VALIDATORS, FormControl } from '@angular/forms';
 
-function validateEmailFactory() {
+export function validateEmailFactory() {
   return (c: FormControl) => {
     let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;