Merge pull request #10031 from IgniteUI/PMiteva/input-group-reactive

Setting input disabled state in reactive form

Author: kdinev

projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts

@@ -521,11 +521,16 @@ describe('IgxInput', () => {
         fixture.detectChanges();
         const igxInput = fixture.componentInstance.strIgxInput;
 
+        expect(igxInput.disabled).toBe(false);
+        expect(igxInput.inputGroup.disabled).toBe(false);
+
         fixture.componentInstance.form.disable();
         expect(igxInput.disabled).toBe(true);
+        expect(igxInput.inputGroup.disabled).toBe(true);
 
         fixture.componentInstance.form.get('str').enable();
         expect(igxInput.disabled).toBe(false);
+        expect(igxInput.inputGroup.disabled).toBe(false);
     }));
 
     it('should style input when required is toggled dynamically.', () => {

projects/igniteui-angular/src/lib/directives/input/input.directive.ts

@@ -174,9 +174,6 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
      * ```
      */
     public get disabled() {
-        if (this.ngControl && this.ngControl.disabled !== null) {
-            return this.ngControl.disabled;
-        }
         return this._disabled;
     }
 
@@ -268,6 +265,10 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
         this.inputGroup.hasPlaceholder = this.nativeElement.hasAttribute(
             'placeholder'
         );
+
+        if (this.ngControl && this.ngControl.disabled !== null) {
+            this.disabled = this.ngControl.disabled;
+        }
         this.inputGroup.disabled =
             this.inputGroup.disabled ||
             this.nativeElement.hasAttribute('disabled');
@@ -352,8 +353,8 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
                 if (!this.disabled && (this.ngControl.control.touched || this.ngControl.control.dirty)) {
                     // the control is not disabled and is touched or dirty
                     this._valid = this.ngControl.invalid ?
-                                  IgxInputState.INVALID : this.focused ? IgxInputState.VALID :
-                                  IgxInputState.INITIAL;
+                        IgxInputState.INVALID : this.focused ? IgxInputState.VALID :
+                            IgxInputState.INITIAL;
                 } else {
                     //  if control is untouched, pristine, or disabled its state is initial. This is when user did not interact
                     //  with the input or when form/control is reset
@@ -459,8 +460,8 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
     private checkNativeValidity() {
         if (!this.disabled && this._hasValidators()) {
             this._valid = this.nativeElement.checkValidity() ?
-                            this.focused ? IgxInputState.VALID : IgxInputState.INITIAL :
-                            IgxInputState.INVALID;
+                this.focused ? IgxInputState.VALID : IgxInputState.INITIAL :
+                IgxInputState.INVALID;
         }
     }