feat(module:time-picker,select,tree-select): support nzId (#6379)

NG-ZORRO · Feb 26, 2021 · 85d423d · 85d423d
1 parent 4d80873
commit 85d423d
Show file tree

Hide file tree

Showing 13 changed files with 20 additions and 3 deletions.
diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
@@ -73,7 +73,7 @@ export type NzDatePickerSizeType = 'large' | 'default' | 'small';
       [suffixIcon]="nzSuffixIcon"
       (openChange)="onOpenChange($event)"
       (focusChange)="onFocusChange($event)"
-      [id]="nzId"
+      [nzId]="nzId"
     >
       <date-range-popup
         [isRange]="isRange"

diff --git a/components/date-picker/picker.component.ts b/components/date-picker/picker.component.ts
@@ -59,7 +59,7 @@ import { PREFIX_CLASS } from './util';
       <div *ngIf="!isRange" class="{{ prefixCls }}-input">
         <input
           #pickerInput
-          [attr.id]="id"
+          [attr.id]="nzId"
           [class.ant-input-disabled]="disabled"
           [disabled]="disabled"
           [readOnly]="inputReadOnly"
@@ -178,7 +178,7 @@ export class NzPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDe
   @Input() dropdownClassName?: string;
   @Input() suffixIcon?: string | TemplateRef<NzSafeAny>;
   @Input() dir: Direction = 'ltr';
-  @Input() id: string | null = null;
+  @Input() nzId: string | null = null;
 
   @Output() readonly focusChange = new EventEmitter<boolean>();
   @Output() readonly valueChange = new EventEmitter<CandyDate | CandyDate[] | null>();

diff --git a/components/select/doc/index.en-US.md b/components/select/doc/index.en-US.md
@@ -28,6 +28,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 
 | Property | Description | Type | Default | Global Config |
 | -------- | ----------- | ---- | ------- | ------- |
+| `[nzId]` | input id attribute inside the component| `string` | - |
 | `[ngModel]` | Current selected nz-option value, double binding. | `any \| any[]` | - |
 | `[compareWith]` | Same as [SelectControlValueAccessor](https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection) | `(o1: any, o2: any) => boolean` | `(o1: any, o2: any) => o1===o2` |
 | `[nzAutoClearSearchValue]` | Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags`. | `boolean` | `true` |

diff --git a/components/select/doc/index.zh-CN.md b/components/select/doc/index.zh-CN.md
@@ -29,6 +29,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 
 | 参数 | 说明 | 类型 | 默认值 | 全局配置 |
 | --- | --- | --- | --- | --- |
+| `[nzId]` | 组件内部 input 的 id 值 | `string` | - |
 | `[ngModel]` | 当前选中的 nz-option 的 nzValue 值，可双向绑定，当 `nzMode` 为 `multiple` 或 `tags` 时，ngModel 为数组 | `any \| any[]` | - |
 | `[compareWith]` | 与 [SelectControlValueAccessor](https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection) 相同 | `(o1: any, o2: any) => boolean` | `(o1: any, o2: any) => o1===o2` |
 | `[nzAutoClearSearchValue]` | 是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效。 | `boolean` | `true` |

diff --git a/components/select/select-search.component.ts b/components/select/select-search.component.ts
@@ -27,6 +27,7 @@ import { COMPOSITION_BUFFER_MODE } from '@angular/forms';
   template: `
     <input
       #inputElement
+      [attr.id]="nzId"
       autocomplete="off"
       class="ant-select-selection-search-input"
       [ngModel]="value"
@@ -42,6 +43,7 @@ import { COMPOSITION_BUFFER_MODE } from '@angular/forms';
   providers: [{ provide: COMPOSITION_BUFFER_MODE, useValue: false }]
 })
 export class NzSelectSearchComponent implements AfterViewInit, OnChanges {
+  @Input() nzId: string | null = null;
   @Input() disabled = false;
   @Input() mirrorSync = false;
   @Input() showInput = true;

diff --git a/components/select/select-top-control.component.ts b/components/select/select-top-control.component.ts
@@ -37,6 +37,7 @@ import { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } f
     <ng-container [ngSwitch]="mode">
       <ng-container *ngSwitchCase="'default'">
         <nz-select-search
+          [nzId]="nzId"
           [disabled]="disabled"
           [value]="inputValue!"
           [showInput]="showSearch"
@@ -73,6 +74,7 @@ import { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } f
           (delete)="onDeleteItem(item.contentTemplateOutletContext)"
         ></nz-select-item>
         <nz-select-search
+          [nzId]="nzId"
           [disabled]="disabled"
           [value]="inputValue!"
           [autofocus]="autofocus"
@@ -91,6 +93,7 @@ import { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } f
   }
 })
 export class NzSelectTopControlComponent implements OnChanges {
+  @Input() nzId: string | null = null;
   @Input() showSearch = false;
   @Input() placeHolder: string | TemplateRef<NzSafeAny> | null = null;
   @Input() open = false;

diff --git a/components/select/select.component.ts b/components/select/select.component.ts
@@ -74,6 +74,7 @@ export type NzSelectSizeType = 'large' | 'default' | 'small';
     <nz-select-top-control
       cdkOverlayOrigin
       #origin="cdkOverlayOrigin"
+      [nzId]="nzId"
       [open]="nzOpen"
       [disabled]="nzDisabled"
       [mode]="nzMode"
@@ -172,6 +173,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie
   static ngAcceptInputType_nzDisabled: BooleanInput;
   static ngAcceptInputType_nzOpen: BooleanInput;
 
+  @Input() nzId: string | null = null;
   @Input() nzSize: NzSelectSizeType = 'default';
   @Input() nzOptionHeightPx = 32;
   @Input() nzOptionOverflowSize = 8;

diff --git a/components/time-picker/doc/index.en-US.md b/components/time-picker/doc/index.en-US.md
@@ -25,6 +25,7 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 
 | Property | Description | Type | Default | Global Config |
 | -------- | ----------- | ---- | ------- | ------------- |
+| `[nzId]` | input id attribute inside the component| `string` | - |
 | `[ngModel]` | to set time | `Date` | - |
 | `[nzAddOn]` | called from timepicker panel to render some addon to its bottom | `TemplateRef<void>` | - |
 | `[nzAllowEmpty]` | allow clearing text | `boolean` | `true` | ✅ |

diff --git a/components/time-picker/doc/index.zh-CN.md b/components/time-picker/doc/index.zh-CN.md
@@ -26,6 +26,7 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 
 | 参数 | 说明 | 类型 | 默认值 | 全局配置 |
 | --- | --- | --- | --- | --- |
+| `[nzId]` | 组件内部 input 的 id 值 | `string` | - |
 | `[ngModel]` | 当前时间 | `Date` | - |
 | `[nzAddOn]` | 选择框底部显示自定义的内容 | `TemplateRef<void>` | - |
 | `[nzAllowEmpty]` | 是否展示清除按钮 | `boolean` | `true` | ✅ |

diff --git a/components/time-picker/time-picker.component.ts b/components/time-picker/time-picker.component.ts
@@ -48,6 +48,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'timePicker';
     <div class="ant-picker-input">
       <input
         #inputElement
+        [attr.id]="nzId"
         type="text"
         [size]="inputSize"
         [placeholder]="nzPlaceHolder || (i18nPlaceHolder$ | async)"
@@ -153,6 +154,7 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
   dir: Direction = 'ltr';
 
   @ViewChild('inputElement', { static: true }) inputRef!: ElementRef<HTMLInputElement>;
+  @Input() nzId: string | null = null;
   @Input() nzSize: string | null = null;
   @Input() @WithConfig() nzHourStep: number = 1;
   @Input() @WithConfig() nzMinuteStep: number = 1;

diff --git a/components/tree-select/doc/index.en-US.md b/components/tree-select/doc/index.en-US.md
@@ -22,6 +22,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 
 | Property | Description | Type | Default | Global Config |
 | -------- | ----------- | ---- | ------- | ------------- |
+| `[nzId]` | input id attribute inside the component| `string` | - |
 | `[nzAllowClear]` | Whether allow clear | `boolean` | `false` |
 | `[nzPlaceHolder]` | Placeholder of the select input | `string` | - |
 | `[nzDisabled]` | Disabled or not | `boolean` | `false` |

diff --git a/components/tree-select/doc/index.zh-CN.md b/components/tree-select/doc/index.zh-CN.md
@@ -22,6 +22,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 
 | 参数 | 说明 | 类型 | 默认值 | 全局配置 |
 | --- | --- | --- | --- | --- |
+| `[nzId]` | 组件内部 input 的 id 值 | `string` | - |
 | `[nzAllowClear]` | 显示清除按钮 | `boolean` | `false` |
 | `[nzPlaceHolder]` | 选择框默认文字 | `string` | - |
 | `[nzDisabled]` | 禁用选择器 | `boolean` | `false` |

diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts
@@ -154,6 +154,7 @@ const TREE_SELECT_DEFAULT_CLASS = 'ant-select-dropdown ant-select-tree-dropdown'
       </ng-container>
 
       <nz-select-search
+        [nzId]="nzId"
         [showInput]="nzShowSearch"
         (keydown)="onKeyDownInput($event)"
         (isComposingChange)="isComposing = $event"
@@ -228,6 +229,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   static ngAcceptInputType_nzDefaultExpandAll: BooleanInput;
   static ngAcceptInputType_nzCheckStrictly: BooleanInput;
 
+  @Input() nzId: string | null = null;
   @Input() @InputBoolean() nzAllowClear: boolean = true;
   @Input() @InputBoolean() nzShowExpand: boolean = true;
   @Input() @InputBoolean() nzShowLine: boolean = false;