feat(module:input-number): add nzReadOnly property (#7372)

close #7369

* feat(module:input-number): add nzReadOnly property

* chore(module:input-number): modify property name

* chore(module:input-number): modify test case name

* chore: modify doc style

* chore: doc style

* chore: doc style

* chore: input doc style

* chore: doc style

Author: chenc041

components/input-number/doc/index.en-US.md

@@ -24,6 +24,7 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
 | `[ngModel]` | current value, double binding | `number \| string`  \|  `string` | - |
 | `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` |
 | `[nzDisabled]` | disable the input | `boolean` | `false` |
+| `[nzReadOnly]` | If readonly the input | `boolean` | `false` |
 | `[nzMax]` | max value | `number` | `Infinity` |
 | `[nzMin]` | min value | `number` | `-Infinity` |
 | `[nzFormatter]` | Specifies the format of the value presented | `(value: number \| string) => string \| number` | - |

components/input-number/doc/index.zh-CN.md

@@ -25,6 +25,7 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
 | `[ngModel]` | 当前值，可双向绑定 | `number \| string`  \|  `string` | - |
 | `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` |
 | `[nzDisabled]` | 禁用 | `boolean` | `false` |
+| `[nzReadOnly]` | 只读 | `boolean` | `false` |
 | `[nzMax]` | 最大值 | `number` | `Infinity` |
 | `[nzMin]` | 最小值 | `number` | `-Infinity` |
 | `[nzFormatter]` | 指定输入框展示值的格式 | `(value: number \| string) => string \| number` | - |

components/input-number/input-number.component.ts

@@ -70,6 +70,7 @@ import { InputBoolean, isNotNil } from 'ng-zorro-antd/core/util';
         [attr.max]="nzMax"
         [placeholder]="nzPlaceHolder"
         [attr.step]="nzStep"
+        [readOnly]="nzReadOnly"
         [attr.inputmode]="nzInputMode"
         [ngModel]="displayValue"
         (ngModelChange)="onModelChange($event)"
@@ -91,11 +92,13 @@ import { InputBoolean, isNotNil } from 'ng-zorro-antd/core/util';
     '[class.ant-input-number-lg]': `nzSize === 'large'`,
     '[class.ant-input-number-sm]': `nzSize === 'small'`,
     '[class.ant-input-number-disabled]': 'nzDisabled',
+    '[class.ant-input-number-readonly]': 'nzReadOnly',
     '[class.ant-input-number-rtl]': `dir === 'rtl'`
   }
 })
 export class NzInputNumberComponent implements ControlValueAccessor, AfterViewInit, OnChanges, OnInit, OnDestroy {
   static ngAcceptInputType_nzDisabled: BooleanInput;
+  static ngAcceptInputType_nzReadOnly: BooleanInput;
   static ngAcceptInputType_nzAutoFocus: BooleanInput;
 
   private autoStepTimer?: number;
@@ -127,6 +130,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
   @Input() nzInputMode: string = 'decimal';
   @Input() nzId: string | null = null;
   @Input() @InputBoolean() nzDisabled = false;
+  @Input() @InputBoolean() nzReadOnly = false;
   @Input() @InputBoolean() nzAutoFocus = false;
   @Input() nzFormatter: (value: number) => string | number = value => value;
 

components/input-number/input-number.spec.ts

@@ -14,7 +14,11 @@ describe('input number', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [NzInputNumberModule, FormsModule, ReactiveFormsModule],
-      declarations: [NzTestInputNumberBasicComponent, NzTestInputNumberFormComponent]
+      declarations: [
+        NzTestInputNumberBasicComponent,
+        NzTestInputNumberFormComponent,
+        NzTestReadOnlyInputNumberBasicComponent
+      ]
     });
     TestBed.compileComponents();
   }));
@@ -467,6 +471,34 @@ describe('input number', () => {
       expect(testComponent.formGroup.get('inputNumber')!.value).toBe(10);
     }));
   });
+  describe('input number readOnly', () => {
+    let fixture: ComponentFixture<NzTestReadOnlyInputNumberBasicComponent>;
+    let testComponent: NzTestReadOnlyInputNumberBasicComponent;
+    let inputNumber: DebugElement;
+    let inputElement: HTMLInputElement;
+
+    beforeEach(fakeAsync(() => {
+      fixture = TestBed.createComponent(NzTestReadOnlyInputNumberBasicComponent);
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      testComponent = fixture.debugElement.componentInstance;
+
+      inputNumber = fixture.debugElement.query(By.directive(NzInputNumberComponent));
+      inputElement = inputNumber.nativeElement.querySelector('input');
+    }));
+    it('should readOnly work', () => {
+      fixture.detectChanges();
+      testComponent.readonly = true;
+      testComponent.nzInputNumberComponent.nzReadOnly = true;
+      testComponent.nzInputNumberComponent.ngAfterViewInit();
+      fixture.detectChanges();
+      expect(inputElement.attributes.getNamedItem('readOnly')!.name).toBe('readonly');
+      testComponent.readonly = false;
+      fixture.detectChanges();
+      expect(inputElement.attributes.getNamedItem('readOnly')).toBe(null);
+    });
+  });
 });
 
 @Component({
@@ -505,6 +537,14 @@ export class NzTestInputNumberBasicComponent {
   modelChange = jasmine.createSpy('change callback');
 }
 
+@Component({
+  template: ` <nz-input-number [nzReadOnly]="readonly"></nz-input-number> `
+})
+export class NzTestReadOnlyInputNumberBasicComponent {
+  @ViewChild(NzInputNumberComponent, { static: false }) nzInputNumberComponent!: NzInputNumberComponent;
+  readonly = false;
+}
+
 @Component({
   template: `
     <form [formGroup]="formGroup">