fix(module:input): fix input disable style in reactive form (#1167)

NG-ZORRO · Mar 18, 2018 · 5c07161 · 5c07161
1 parent fdd03d7
commit 5c07161
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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",