fix(module:input): mix using addon and affix (#1857)

close #1795
NG-ZORRO · Jul 22, 2018 · ca2d7e0 · ca2d7e0
1 parent 7c90a72
commit ca2d7e0
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 22 deletions.
diff --git a/components/input/nz-input-group.component.html b/components/input/nz-input-group.component.html
@@ -6,7 +6,10 @@
       <ng-template [ngTemplateOutlet]="nzAddOnBefore"></ng-template>
     </ng-template>
   </span>
-  <ng-template *ngTemplateOutlet="contentTemplate"></ng-template>
+  <ng-template [ngIf]="!isAffix" *ngTemplateOutlet="contentTemplate"></ng-template>
+  <span class="ant-input-affix-wrapper" [class.ant-input-affix-wrapper-sm]="isSmall" [class.ant-input-affix-wrapper-lg]="isLarge" *ngIf="isAffix">
+    <ng-template *ngTemplateOutlet="affixTemplate"></ng-template>
+  </span>
   <span class="ant-input-group-addon" *ngIf="nzAddOnAfter || nzAddOnAfterIcon">
     <i [ngClass]="nzAddOnAfterIcon" *ngIf="nzAddOnAfterIcon"></i>
     <ng-container *ngIf="isAddOnAfterString; else addOnAfterTemplate">{{ nzAddOnAfter }}</ng-container>
@@ -15,22 +18,25 @@
     </ng-template>
   </span>
 </span>
-<ng-template [ngIf]="isAffix">
-<span class="ant-input-prefix" *ngIf="nzPrefix || nzPrefixIcon">
-  <i [ngClass]="nzPrefixIcon" *ngIf="nzPrefixIcon"></i>
-  <ng-container *ngIf="isPrefixString; else prefixTemplate">{{ nzPrefix }}</ng-container>
-  <ng-template #prefixTemplate>
-    <ng-template [ngTemplateOutlet]="nzPrefix"></ng-template>
-  </ng-template>
-</span>
-<ng-template *ngTemplateOutlet="contentTemplate"></ng-template>
-<span class="ant-input-suffix" *ngIf="nzSuffix || nzSuffixIcon">
-  <i [ngClass]="nzSuffixIcon" *ngIf="nzSuffixIcon"></i>
-  <ng-container *ngIf="isSuffixString; else suffixTemplate">{{ nzSuffix }}</ng-container>
-  <ng-template #suffixTemplate>
-    <ng-template [ngTemplateOutlet]="nzSuffix"></ng-template>
-  </ng-template>
-</span>
+<ng-container *ngIf="isAffix && !isAddOn">
+  <ng-template *ngTemplateOutlet="affixTemplate"></ng-template>
+</ng-container>
+<ng-template #affixTemplate>
+  <span class="ant-input-prefix" *ngIf="nzPrefix || nzPrefixIcon">
+    <i [ngClass]="nzPrefixIcon" *ngIf="nzPrefixIcon"></i>
+    <ng-container *ngIf="isPrefixString; else prefixTemplate">{{ nzPrefix }}</ng-container>
+    <ng-template #prefixTemplate>
+      <ng-template [ngTemplateOutlet]="nzPrefix"></ng-template>
+    </ng-template>
+  </span>
+  <ng-template *ngTemplateOutlet="contentTemplate"></ng-template>
+  <span class="ant-input-suffix" *ngIf="nzSuffix || nzSuffixIcon">
+    <i [ngClass]="nzSuffixIcon" *ngIf="nzSuffixIcon"></i>
+    <ng-container *ngIf="isSuffixString; else suffixTemplate">{{ nzSuffix }}</ng-container>
+    <ng-template #suffixTemplate>
+      <ng-template [ngTemplateOutlet]="nzSuffix"></ng-template>
+    </ng-template>
+  </span>
 </ng-template>
 <ng-template [ngIf]="isGroup" *ngTemplateOutlet="contentTemplate"></ng-template>
 <ng-template #contentTemplate>

diff --git a/components/input/nz-input-group.component.ts b/components/input/nz-input-group.component.ts
@@ -117,9 +117,13 @@ export class NzInputGroupComponent implements AfterContentInit {
     return this.nzSize === 'small';
   }
 
-  @HostBinding('class.ant-input-affix-wrapper')
   get isAffix(): boolean {
-    return !!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon);
+    return (!!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon));
+  }
+
+  @HostBinding('class.ant-input-affix-wrapper')
+  get isAffixWrapper(): boolean {
+    return (!!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon)) && !this.isAddOn;
   }
 
   @HostBinding('class.ant-input-group-wrapper')
@@ -144,7 +148,7 @@ export class NzInputGroupComponent implements AfterContentInit {
 
   @HostBinding(`class.ant-input-affix-wrapper-lg`)
   get isLargeAffix(): boolean {
-    return this.isAffix && this.isLarge;
+    return this.isAffixWrapper && this.isLarge;
   }
 
   @HostBinding(`class.ant-input-search-lg`)
@@ -159,7 +163,7 @@ export class NzInputGroupComponent implements AfterContentInit {
 
   @HostBinding(`class.ant-input-affix-wrapper-sm`)
   get isSmallAffix(): boolean {
-    return this.isAffix && this.isSmall;
+    return this.isAffixWrapper && this.isSmall;
   }
 
   @HostBinding(`class.ant-input-group-wrapper-sm`)

diff --git a/components/input/nz-input.spec.ts b/components/input/nz-input.spec.ts
@@ -15,7 +15,7 @@ describe('input', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports     : [ NzInputModule, FormsModule, ReactiveFormsModule ],
-      declarations: [ NzTestInputWithInputComponent, NzTestInputWithTextAreaComponent, NzTestInputWithTextAreaAutoSizeStringComponent, NzTestInputWithTextAreaAutoSizeObjectComponent, NzTestInputGroupAddonComponent, NzTestInputGroupAffixComponent, NzTestInputGroupMultipleComponent, NzTestInputGroupColComponent, NzTestInputFormComponent ],
+      declarations: [ NzTestInputWithInputComponent, NzTestInputWithTextAreaComponent, NzTestInputWithTextAreaAutoSizeStringComponent, NzTestInputWithTextAreaAutoSizeObjectComponent, NzTestInputGroupAddonComponent, NzTestInputGroupAffixComponent, NzTestInputGroupMultipleComponent, NzTestInputGroupColComponent, NzTestInputFormComponent, NzTestInputGroupMixComponent ],
       providers   : []
     }).compileComponents();
   }));
@@ -321,6 +321,18 @@ describe('input', () => {
         expect(inputGroupElement.classList).toContain('ant-input-group');
       });
     });
+    describe('mix', () => {
+      let inputGroupElement;
+      beforeEach(() => {
+        fixture = TestBed.createComponent(NzTestInputGroupMixComponent);
+        testComponent = fixture.debugElement.componentInstance;
+        fixture.detectChanges();
+        inputGroupElement = fixture.debugElement.query(By.directive(NzInputGroupComponent)).nativeElement;
+      });
+      it('should mix work', () => {
+        expect(inputGroupElement.querySelector('.ant-input-affix-wrapper').nextElementSibling.classList).toContain('ant-input-group-addon');
+      });
+    });
   });
   describe('input form', () => {
     describe('input with form', () => {
@@ -427,6 +439,18 @@ export class NzTestInputGroupMultipleComponent {
   size = 'default';
 }
 
+/** https://github.com/NG-ZORRO/ng-zorro-antd/issues/1795 **/
+@Component({
+  selector: 'nz-test-input-group-mix',
+  template: `
+    <nz-input-group nzPrefixIcon="anticon anticon-user" nzAddOnAfter="@example.com">
+      <input type="text" nz-input placeholder="邮箱地址">
+    </nz-input-group>
+  `
+})
+export class NzTestInputGroupMixComponent {
+}
+
 @Component({
   selector: 'nz-test-input-group-col',
   template: `