feat(module:input-number): support setting status (#7462)

* feat(module:input-number): support setting status

* feat(module:input-number): add tests for status

Author: simplejason

components/cascader/cascader.spec.ts

@@ -31,6 +31,7 @@ import {
   dispatchKeyboardEvent,
   dispatchMouseEvent
 } from 'ng-zorro-antd/core/testing';
+import { NzStatus } from 'ng-zorro-antd/core/types';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 
 import { NzCascaderComponent } from './cascader.component';
@@ -2205,5 +2206,5 @@ export class NzDemoCascaderRtlComponent {
 })
 export class NzDemoCascaderStatusComponent {
   public nzOptions: any[] | null = options1;
-  public status = 'error';
+  public status: NzStatus = 'error';
 }

components/input-number/demo/status.md

@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+    zh-CN: 自定义状态
+    en-US: Status
+---
+
+## zh-CN
+
+使用 `nzStatus` 为 InputNumber 添加状态，可选 `error` 或者 `warning`。
+
+## en-US
+
+Add status to InputNumber with `nzStatus`, which could be `error` or `warning`.

components/input-number/demo/status.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-input-number-status',
+  template: `
+    <nz-input-number [nzStep]="1" nzStatus="error"></nz-input-number>
+    <nz-input-number [nzStep]="1" nzStatus="warning"></nz-input-number>
+  `,
+  styles: [
+    `
+      nz-input-number {
+        width: 100%;
+        margin-bottom: 8px;
+      }
+    `
+  ]
+})
+export class NzDemoInputNumberStatusComponent {}

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

@@ -32,6 +32,7 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
 | `[nzPrecision]` | precision of input value | `number` | - |
 | `[nzPrecisionMode]` | The method for calculating the precision of input value | `'cut' \| 'toFixed' \| ((value: number \| string, precision?: number) => number)` | `'toFixed'` |
 | `[nzSize]` | width of input box | `'large' \| 'small' \| 'default'` | `'default'` |
+| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
 | `[nzStep]` | The number to which the current value is increased or decreased. It can be an integer or decimal. | `number \| string` | `1` |
 | `[nzInputMode]` | enumerated attribute that hints at the type of data that might be entered by the user, [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) | `string` | `decimal` |
 | `[nzPlaceHolder]` | Placeholder of select | `string` | - |

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

@@ -33,6 +33,7 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
 | `[nzPrecision]` | 数值精度 | `number` | - |
 | `[nzPrecisionMode]` | 数值精度的取值方式 | `'cut' \| 'toFixed' \| ((value: number \| string, precision?: number) => number)` | `'toFixed'` |
 | `[nzSize]` | 输入框大小 | `'large' \| 'small' \| 'default'` | `'default'` |
+| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
 | `[nzStep]` | 每次改变步数，可以为小数 | `number \| string` | `1` |
 | `[nzInputMode]` | 提供了用户在编辑元素或其内容时可能输入的数据类型的提示，详见[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode) | `string` | `decimal` |
 | `[nzPlaceHolder]` | 选择框默认文字 | `string` | - |

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

@@ -21,6 +21,7 @@ import {
   OnInit,
   Optional,
   Output,
+  Renderer2,
   SimpleChanges,
   ViewChild,
   ViewEncapsulation
@@ -30,8 +31,15 @@ import { fromEvent, merge } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { NzDestroyService } from 'ng-zorro-antd/core/services';
-import { BooleanInput, NzSizeLDSType, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
-import { InputBoolean, isNotNil } from 'ng-zorro-antd/core/util';
+import {
+  BooleanInput,
+  NgClassInterface,
+  NzSizeLDSType,
+  NzStatus,
+  OnChangeType,
+  OnTouchedType
+} from 'ng-zorro-antd/core/types';
+import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/util';
 
 @Component({
   selector: 'nz-input-number',
@@ -109,6 +117,10 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
   disabledUp = false;
   disabledDown = false;
   dir: Direction = 'ltr';
+  // status
+  prefixCls: string = 'ant-input-number';
+  statusCls: NgClassInterface = {};
+  nzHasFeedback: boolean = false;
   onChange: OnChangeType = () => {};
   onTouched: OnTouchedType = () => {};
   @Output() readonly nzBlur = new EventEmitter();
@@ -130,6 +142,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
   @Input() nzPrecision?: number;
   @Input() nzPrecisionMode: 'cut' | 'toFixed' | ((value: number | string, precision?: number) => number) = 'toFixed';
   @Input() nzPlaceHolder = '';
+  @Input() nzStatus?: NzStatus;
   @Input() nzStep = 1;
   @Input() nzInputMode: string = 'decimal';
   @Input() nzId: string | null = null;
@@ -376,6 +389,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
     private elementRef: ElementRef<HTMLElement>,
     private cdr: ChangeDetectorRef,
     private focusMonitor: FocusMonitor,
+    private renderer: Renderer2,
     @Optional() private directionality: Directionality,
     private destroy$: NzDestroyService
   ) {}
@@ -434,11 +448,15 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    const { nzStatus } = changes;
     if (changes.nzFormatter && !changes.nzFormatter.isFirstChange()) {
       const validValue = this.getCurrentValidValue(this.parsedValue!);
       this.setValue(validValue);
       this.updateDisplayValue(validValue);
     }
+    if (nzStatus) {
+      this.setStatusStyles();
+    }
   }
 
   ngAfterViewInit(): void {
@@ -463,4 +481,16 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
         .subscribe(() => this.stop());
     });
   }
+
+  private setStatusStyles(): void {
+    // render status if nzStatus is set
+    this.statusCls = getStatusClassNames(this.prefixCls, this.nzStatus, this.nzHasFeedback);
+    Object.keys(this.statusCls).forEach(status => {
+      if (this.statusCls[status]) {
+        this.renderer.addClass(this.elementRef.nativeElement, status);
+      } else {
+        this.renderer.removeClass(this.elementRef.nativeElement, status);
+      }
+    });
+  }
 }

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

@@ -6,6 +6,7 @@ import { By } from '@angular/platform-browser';
 import { take } from 'rxjs/operators';
 
 import { createKeyboardEvent, createMouseEvent, dispatchEvent, dispatchFakeEvent } from 'ng-zorro-antd/core/testing';
+import { NzStatus } from 'ng-zorro-antd/core/types';
 
 import { NzInputNumberComponent } from './input-number.component';
 import { NzInputNumberModule } from './input-number.module';
@@ -17,7 +18,8 @@ describe('input number', () => {
       declarations: [
         NzTestInputNumberBasicComponent,
         NzTestInputNumberFormComponent,
-        NzTestReadOnlyInputNumberBasicComponent
+        NzTestReadOnlyInputNumberBasicComponent,
+        NzTestInputNumberStatusComponent
       ]
     });
     TestBed.compileComponents();
@@ -517,6 +519,34 @@ describe('input number', () => {
       expect(inputElement.attributes.getNamedItem('readOnly')).toBe(null);
     });
   });
+
+  describe('input number status', () => {
+    let fixture: ComponentFixture<NzTestInputNumberStatusComponent>;
+    let testComponent: NzTestInputNumberStatusComponent;
+    let inputNumber: DebugElement;
+
+    beforeEach(fakeAsync(() => {
+      fixture = TestBed.createComponent(NzTestInputNumberStatusComponent);
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      testComponent = fixture.debugElement.componentInstance;
+
+      inputNumber = fixture.debugElement.query(By.directive(NzInputNumberComponent));
+    }));
+    it('should status work', () => {
+      fixture.detectChanges();
+      expect(inputNumber.nativeElement.className).toContain('ant-input-number-status-error');
+
+      testComponent.status = 'warning';
+      fixture.detectChanges();
+      expect(inputNumber.nativeElement.className).toContain('ant-input-number-status-warning');
+
+      testComponent.status = '';
+      fixture.detectChanges();
+      expect(inputNumber.nativeElement.className).not.toContain('ant-input-number-status-warning');
+    });
+  });
 });
 
 @Component({
@@ -583,3 +613,10 @@ export class NzTestInputNumberFormComponent {
     this.formGroup.disable();
   }
 }
+
+@Component({
+  template: ` <nz-input-number [nzStatus]="status"></nz-input-number> `
+})
+export class NzTestInputNumberStatusComponent {
+  status: NzStatus = 'error';
+}