feat(reactive-forms): implemente disable in form control

fetrarij · Aug 27, 2020 · 7c3265b · 7c3265b
1 parent 6e85a69
commit 7c3265b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/demo/src/app/reactive-form/reactive-form.component.html b/demo/src/app/reactive-form/reactive-form.component.html
@@ -13,7 +13,15 @@ <h6>Multi Select</h6>
     </div>
     <div class="col s6">
       <br/>
+      <button type="button" 
+      class="ngx-daterangepicker-action waves-effect waves-light btn"
+      [ngClass]="{'red': !form.disabled, 'green': form.disabled}"
+      (click)="toggleDisable(form)">
+          {{form.disabled ? 'Enable' : 'Disable'}}
+      </button>
+      &nbsp;
       <button type="submit" class="ngx-daterangepicker-action waves-effect waves-light btn" >Submit</button>
+      &nbsp;
     </div>
   </div>
 </form>

diff --git a/demo/src/app/reactive-form/reactive-form.component.ts b/demo/src/app/reactive-form/reactive-form.component.ts
@@ -39,4 +39,11 @@ export class ReactiveFormComponent {
   submit2() {
     console.log(this.form2.value);
   }
+  toggleDisable(form: FormGroup) {
+    if (form.disabled) {
+      form.enable();
+    } else {
+      form.disable();
+    }
+  }
 }
diff --git a/src/daterangepicker/daterangepicker.directive.ts b/src/daterangepicker/daterangepicker.directive.ts
@@ -15,7 +15,8 @@ import {
   KeyValueDiffers,
   Output,
   EventEmitter,
-  Renderer2
+  Renderer2,
+  HostBinding
 } from '@angular/core';
 import { DaterangepickerComponent } from './daterangepicker.component';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -44,6 +45,7 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
   private _onChange = Function.prototype;
   private _onTouched = Function.prototype;
   private _validatorChange = Function.prototype;
+  private _disabled: boolean;
   private _value: any;
   private localeDiffer: KeyValueDiffer<string, any>;
   @Input()
@@ -154,6 +156,7 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
   @Output('datesUpdated') datesUpdated: EventEmitter<Object> = new EventEmitter();
   @Output() startDateChanged: EventEmitter<Object> = new EventEmitter();
   @Output() endDateChanged: EventEmitter<Object> = new EventEmitter();
+  @HostBinding('disabled') get disabled() { return this._disabled; }
   constructor(
     public viewContainerRef: ViewContainerRef,
     public _changeDetectorRef: ChangeDetectorRef,
@@ -232,6 +235,9 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
   }
 
   open(event?: any) {
+    if (this.disabled) {
+      return;
+    }
     this.picker.show(event);
     setTimeout(() => {
       this.setPosition();
@@ -262,6 +268,9 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
   registerOnTouched(fn) {
     this._onTouched = fn;
   }
+  setDisabledState(state: boolean): void {
+    this._disabled = state;
+}
   private setValue(val: any) {
     if (val) {
       this.value = val;