From 5c0716107e0955b034a2d9ce75463ff3b0e9fdb6 Mon Sep 17 00:00:00 2001
From: VTHINKXIE <vthinkxie@users.noreply.github.com>
Date: Sun, 18 Mar 2018 12:20:29 +0800
Subject: [PATCH] fix(module:input): fix input disable style in reactive form
 (#1167)

---
 components/input/nz-input.directive.ts | 10 ++++--
 components/input/nz-input.spec.ts      | 45 ++++++++++++++++++++++++--
 package.json                           |  2 +-
 3 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/components/input/nz-input.directive.ts b/components/input/nz-input.directive.ts
index b30ca0ebce..def9c67a99 100644
--- a/components/input/nz-input.directive.ts
+++ b/components/input/nz-input.directive.ts
@@ -7,9 +7,10 @@ import {
   HostListener,
   Input,
   Optional,
-  Renderer2
+  Renderer2,
+  Self
 } from '@angular/core';
-import { NgModel } from '@angular/forms';
+import { NgControl, NgModel } from '@angular/forms';
 
 import calculateNodeHeight from '../core/util/calculate-node-height';
 import { toBoolean } from '../core/util/convert';
@@ -51,6 +52,9 @@ export class NzInputDirective implements DoCheck, AfterViewInit {
   }
 
   get disabled(): boolean {
+    if (this.ngControl && this.ngControl.disabled !== null) {
+      return this.ngControl.disabled;
+    }
     return this._disabled;
   }
 
@@ -104,7 +108,7 @@ export class NzInputDirective implements DoCheck, AfterViewInit {
     this.renderer.setStyle(textAreaRef, 'maxHeight', `${textAreaStyles.maxHeight}px`);
   }
 
-  constructor(private elementRef: ElementRef, private renderer: Renderer2, @Optional() private ngModel: NgModel) {
+  constructor(private elementRef: ElementRef, private renderer: Renderer2, @Optional() private ngModel: NgModel, @Optional() @Self() public ngControl: NgControl) {
     this.el = this.elementRef.nativeElement;
   }
 
diff --git a/components/input/nz-input.spec.ts b/components/input/nz-input.spec.ts
index 537cc00087..5ff91c9d3e 100644
--- a/components/input/nz-input.spec.ts
+++ b/components/input/nz-input.spec.ts
@@ -1,6 +1,6 @@
 import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { async, fakeAsync, flush, TestBed } from '@angular/core/testing';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 
 import { dispatchKeyboardEvent } from '../core/testing';
@@ -15,7 +15,7 @@ describe('input', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports     : [ NzInputModule, FormsModule, ReactiveFormsModule ],
-      declarations: [ NzTestInputWithInputComponent, NzTestInputWithTextAreaComponent, NzTestInputWithTextAreaAutoSizeStringComponent, NzTestInputWithTextAreaAutoSizeObjectComponent, NzTestInputGroupAddonComponent, NzTestInputGroupAffixComponent, NzTestInputGroupMultipleComponent, NzTestInputGroupColComponent ],
+      declarations: [ NzTestInputWithInputComponent, NzTestInputWithTextAreaComponent, NzTestInputWithTextAreaAutoSizeStringComponent, NzTestInputWithTextAreaAutoSizeObjectComponent, NzTestInputGroupAddonComponent, NzTestInputGroupAffixComponent, NzTestInputGroupMultipleComponent, NzTestInputGroupColComponent, NzTestInputFormComponent ],
       providers   : []
     }).compileComponents();
   }));
@@ -322,6 +322,25 @@ describe('input', () => {
       });
     });
   });
+  describe('input form', () => {
+    describe('input with form', () => {
+      let inputElement;
+      beforeEach(() => {
+        fixture = TestBed.createComponent(NzTestInputFormComponent);
+        testComponent = fixture.debugElement.componentInstance;
+        fixture.detectChanges();
+        inputElement = fixture.debugElement.query(By.directive(NzInputDirective));
+      });
+      it('should set disabled work', fakeAsync(() => {
+        flush();
+        expect(inputElement.nativeElement.classList).not.toContain('ant-input-disabled');
+        testComponent.disable();
+        flush();
+        fixture.detectChanges();
+        expect(inputElement.nativeElement.classList).toContain('ant-input-disabled');
+      }));
+    });
+  });
 });
 
 @Component({
@@ -423,3 +442,25 @@ export class NzTestInputGroupMultipleComponent {
 })
 export class NzTestInputGroupColComponent {
 }
+
+@Component({
+  selector: 'nz-test-input-form',
+  template: `
+    <form [formGroup]="formGroup">
+      <input nz-input formControlName="input">
+    </form>
+  `
+})
+export class NzTestInputFormComponent {
+  formGroup: FormGroup;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.formGroup = this.formBuilder.group({
+      input: [ 'abc' ]
+    });
+  }
+
+  disable(): void {
+    this.formGroup.disable();
+  }
+}
diff --git a/package.json b/package.json
index 6e3f8ab706..c2f2578163 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "doc": "npm run site:init && node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod --build-optimizer",
     "helper": "bash ./release-helper.sh",
     "generate": "bash ./build.sh",
-    "pre-release": "npm run site:init && bash ./build_scripts/replace-publish.sh && npm run generate && ng build --prod && npm run helper",
+    "pre-release": "npm run site:init && bash ./build_scripts/replace-publish.sh && npm run generate && node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod && npm run helper",
     "test": "node site_scripts/generate-site init && ng test --single-run --code-coverage",
     "integration": "npm run generate && bash ./integration-test.sh",
     "integration-cli": "npm run generate && cd integration/angular-cli && npm run integration",