fix(module:input-number): input add boundary assertion

close #72

lib/ng-nest/ui/input-number/input-number.component.html

@@ -40,7 +40,7 @@
       [after]="afterButtonTpl"
       [pattern]="pattern"
       [message]="message"
-      (xInput)="formControlValidator()"
+      (xInput)="onInput($event); formControlValidator()"
     ></x-input>
     <ng-template #afterButtonTpl>
       <x-button

lib/ng-nest/ui/input-number/input-number.component.ts

@@ -1,4 +1,4 @@
-import { Subscription, fromEvent, interval } from 'rxjs';
+import { Subject, Subscription, distinctUntilChanged, fromEvent, interval } from 'rxjs';
 import {
   Component,
   OnInit,
@@ -10,10 +10,18 @@ import {
   ViewChild,
   inject
 } from '@angular/core';
-import { XIsEmpty, XNumber, XClearClass, XConfigService, isNotNil } from '@ng-nest/ui/core';
+import {
+  XIsEmpty,
+  XNumber,
+  XClearClass,
+  XConfigService,
+  isNotNil,
+  XIsFunction
+} from '@ng-nest/ui/core';
 import { XInputNumberPrefix, XInputNumberProperty } from './input-number.property';
 import { XValueAccessor } from '@ng-nest/ui/base-form';
 import { DOCUMENT } from '@angular/common';
+import { XInputComponent } from '@ng-nest/ui/input';
 
 @Component({
   selector: `${XInputNumberPrefix}`,
@@ -26,6 +34,8 @@ import { DOCUMENT } from '@angular/common';
 export class XInputNumberComponent extends XInputNumberProperty implements OnInit {
   @ViewChild('inputNumber', { static: true }) inputNumber!: ElementRef<HTMLElement>;
 
+  @ViewChild(XInputComponent, { static: true }) inputEleRef!: XInputComponent;
+
   override writeValue(value: any) {
     this.value = value;
     this.setDisplayValue();
@@ -42,16 +52,30 @@ export class XInputNumberComponent extends XInputNumberProperty implements OnIni
   iconSpin = false;
   clearable = false;
   isDown = false;
+  valueChange = new Subject<any>();
 
   document = inject(DOCUMENT);
 
-  constructor(public renderer: Renderer2, public override cdr: ChangeDetectorRef, public configService: XConfigService) {
+  constructor(
+    public renderer: Renderer2,
+    public override cdr: ChangeDetectorRef,
+    public configService: XConfigService
+  ) {
     super();
   }
 
   ngOnInit() {
-    this.setFlex(this.inputNumber.nativeElement, this.renderer, this.justify, this.align, this.direction);
+    this.setFlex(
+      this.inputNumber.nativeElement,
+      this.renderer,
+      this.justify,
+      this.align,
+      this.direction
+    );
     this.setClassMap();
+    this.valueChange.pipe(distinctUntilChanged()).subscribe((x) => {
+      this.onChange && this.onChange(x);
+    });
   }
 
   setClassMap() {
@@ -60,17 +84,26 @@ export class XInputNumberComponent extends XInputNumberProperty implements OnIni
   }
 
   setDisplayValue() {
-    if (!XIsEmpty(this.value)) this.displayValue = Number(this.value).toFixed(Number(this.precision));
-    if (!this.formatter) return;
-    const displayValue = isNotNil(this.formatter(Number(this.value))) ? this.formatter(Number(this.value)) : '';
-    if (isNotNil(displayValue)) {
-      this.displayValue = displayValue;
+    if (!XIsEmpty(this.value) && !this.formatter) {
+      this.displayValue = Number(this.value).toFixed(Number(this.precision));
+    } else if (this.formatter) {
+      const displayValue = isNotNil(this.formatter(Number(this.value)))
+        ? this.formatter(Number(this.value))
+        : '';
+      if (isNotNil(displayValue)) {
+        this.displayValue = displayValue;
+      }
     }
   }
 
   change(value: any) {
     this.verify(value);
-    if (this.onChange) this.onChange(this.value);
+    this.valueChange.next(this.value);
+    this.cdr.detectChanges();
+  }
+
+  onBlur() {
+    this.displayValue = this.displayValue;
     this.cdr.detectChanges();
   }
 
@@ -83,9 +116,11 @@ export class XInputNumberComponent extends XInputNumberProperty implements OnIni
       this.mousedown$ = interval(Number(this.debounce)).subscribe(() => {
         this.plus(event, limit, increase);
       });
-      this.mouseup$ = fromEvent(this.document.documentElement, 'mouseup').subscribe((event: Event) => {
-        this.up(event);
-      });
+      this.mouseup$ = fromEvent(this.document.documentElement, 'mouseup').subscribe(
+        (event: Event) => {
+          this.up(event);
+        }
+      );
     }, 150);
   }
 
@@ -109,14 +144,15 @@ export class XInputNumberComponent extends XInputNumberProperty implements OnIni
     let value = Number(this.value) + limit;
     this.verify(value);
     this.cdr.detectChanges();
-    if (this.onChange) this.onChange(this.value);
+    this.valueChange.next(this.value);
   }
 
   verify(value: any) {
     const oldValue: number = this.value;
     this.value = value;
     if (Number.isNaN(+this.value)) {
       this.value = oldValue;
+      this.setDisplayValue();
       return;
     }
     this.maxDisabled = value >= this.max;
@@ -125,6 +161,18 @@ export class XInputNumberComponent extends XInputNumberProperty implements OnIni
     this.setDisplayValue();
   }
 
+  onInput(x: Event) {
+    const input = x.target as HTMLInputElement;
+    let value = input.value;
+    if (XIsFunction(this.formatter)) {
+      value = value.replace(/[^0-9]/g, '');
+    }
+    this.verify(value);
+    this.inputEleRef.inputRef.nativeElement.value = this.displayValue;
+    this.cdr.detectChanges();
+    this.valueChange.next(this.value);
+  }
+
   formControlChanges() {
     this.ngOnInit();
     this.cdr.detectChanges();

src/main/test/modules/input-number/bordered/bordered.component.html

@@ -0,0 +1,17 @@
+<x-row>
+  <x-col span="24">
+    <x-input-number placeholder="请输入" bordered="false"></x-input-number>
+  </x-col>
+  <x-col span="24">
+    <x-input-number placeholder="请输入" bordered="false" label="数量:" direction="row"></x-input-number>
+  </x-col>
+  <x-col span="24">
+    <x-input-number placeholder="请输入" bordered="false"></x-input-number>
+  </x-col>
+  <x-col span="24">
+    <x-input-number placeholder="请输入" bordered="false" required></x-input-number>
+  </x-col>
+  <x-col span="24">
+    <x-input-number placeholder="没有边框" bordered="false" disabled></x-input-number>
+  </x-col>
+</x-row>

src/main/test/modules/input-number/bordered/bordered.component.scss

@@ -0,0 +1,8 @@
+:host {
+  x-row:not(:first-child) {
+    margin-top: 1rem;
+  }
+  x-row > x-col > x-input-number {
+    width: 10rem;
+  }
+}

src/main/test/modules/input-number/bordered/bordered.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ex-bordered',
+  templateUrl: './bordered.component.html',
+  styleUrls: ['./bordered.component.scss']
+})
+export class ExBorderedComponent {}

src/main/test/modules/input-number/disabled/disabled.component.html

@@ -0,0 +1,10 @@
+<x-row>
+  <x-col>
+    <x-input-number disabled></x-input-number>
+  </x-col>
+</x-row>
+<x-row>
+  <x-col>
+    <x-input-number disabled [(ngModel)]="model"></x-input-number>
+  </x-col>
+</x-row>

src/main/test/modules/input-number/disabled/disabled.component.scss

@@ -0,0 +1,8 @@
+:host {
+  x-row > x-col {
+    width: 10rem;
+  }
+  x-row:not(:first-child) {
+    margin-top: 1rem;
+  }
+}

src/main/test/modules/input-number/disabled/disabled.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ex-disabled',
+  templateUrl: './disabled.component.html',
+  styleUrls: ['./disabled.component.scss']
+})
+export class ExDisabledComponent {
+  model = 10;
+}

src/main/test/modules/input-number/input-number.component.html

@@ -1,2 +1,3 @@
-<ex-default></ex-default>
+<!-- <ex-default></ex-default> -->
 <ex-format></ex-format>
+<!-- <ex-limit></ex-limit> -->

src/main/test/modules/input-number/input-number.module.ts

@@ -8,11 +8,38 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { XButtonModule } from '@ng-nest/ui/button';
 import { ExFormatComponent } from './format/format.component';
+import { ExBorderedComponent } from './bordered/bordered.component';
+import { ExDisabledComponent } from './disabled/disabled.component';
+import { ExLabelComponent } from './label/label.component';
+import { ExLimitComponent } from './limit/limit.component';
+import { ExPrecisionComponent } from './precision/precision.component';
+import { ExRequiredComponent } from './required/required.component';
+import { ExSizeComponent } from './size/size.component';
+import { XRadioModule } from '@ng-nest/ui/radio';
 
 const routers = [{ path: '', component: TeInputNumberComponent }];
 
 @NgModule({
-  imports: [RouterModule.forChild(routers), CommonModule, FormsModule, XInputNumberModule, XLayoutModule, XButtonModule],
-  declarations: [TeInputNumberComponent, ExDefaultComponent, ExFormatComponent]
+  imports: [
+    RouterModule.forChild(routers),
+    CommonModule,
+    FormsModule,
+    XInputNumberModule,
+    XLayoutModule,
+    XButtonModule,
+    XRadioModule
+  ],
+  declarations: [
+    TeInputNumberComponent,
+    ExDefaultComponent,
+    ExFormatComponent,
+    ExBorderedComponent,
+    ExDisabledComponent,
+    ExLabelComponent,
+    ExLimitComponent,
+    ExPrecisionComponent,
+    ExRequiredComponent,
+    ExSizeComponent
+  ]
 })
 export class TeInputNumberModule {}

src/main/test/modules/input-number/label/label.component.html

@@ -0,0 +1,20 @@
+<x-row>
+  <x-col>
+    <x-input-number label="数量"></x-input-number>
+  </x-col>
+</x-row>
+<x-row>
+  <x-col>
+    <x-input-number label="数量" direction="column-reverse"></x-input-number>
+  </x-col>
+</x-row>
+<x-row>
+  <x-col>
+    <x-input-number label="数量" direction="row"></x-input-number>
+  </x-col>
+</x-row>
+<x-row>
+  <x-col>
+    <x-input-number label="数量" direction="row-reverse"></x-input-number>
+  </x-col>
+</x-row>

src/main/test/modules/input-number/label/label.component.scss

@@ -0,0 +1,8 @@
+:host {
+  x-row > x-col {
+    width: 10rem;
+  }
+  x-row:not(:first-child) {
+    margin-top: 1rem;
+  }
+}

src/main/test/modules/input-number/label/label.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ex-label',
+  templateUrl: './label.component.html',
+  styleUrls: ['./label.component.scss']
+})
+export class ExLabelComponent {}

src/main/test/modules/input-number/limit/limit.component.html

@@ -0,0 +1,15 @@
+<x-row>
+  <x-col>
+    <x-input-number max="10"></x-input-number>
+  </x-col>
+</x-row>
+<x-row>
+  <x-col>
+    <x-input-number min="1"></x-input-number>
+  </x-col>
+</x-row>
+<x-row>
+  <x-col>
+    <x-input-number min="1" max="10" [ngModel]="value" (ngModelChange)="change($event)"></x-input-number>
+  </x-col>
+</x-row>

src/main/test/modules/input-number/limit/limit.component.scss

@@ -0,0 +1,8 @@
+:host {
+  x-row > x-col {
+    width: 10rem;
+  }
+  x-row:not(:first-child) {
+    margin-top: 1rem;
+  }
+}

src/main/test/modules/input-number/limit/limit.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ex-limit',
+  templateUrl: './limit.component.html',
+  styleUrls: ['./limit.component.scss']
+})
+export class ExLimitComponent {
+  value = 3;
+  change(num: any) {
+    console.log(num);
+  }
+}

src/main/test/modules/input-number/precision/precision.component.html

@@ -0,0 +1,5 @@
+<x-row>
+  <x-col>
+    <x-input-number precision="2" step="0.1"></x-input-number>
+  </x-col>
+</x-row>

src/main/test/modules/input-number/precision/precision.component.scss

@@ -0,0 +1,8 @@
+:host {
+  x-row > x-col {
+    width: 10rem;
+  }
+  x-row:not(:first-child) {
+    margin-top: 1rem;
+  }
+}

src/main/test/modules/input-number/precision/precision.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ex-precision',
+  templateUrl: './precision.component.html',
+  styleUrls: ['./precision.component.scss']
+})
+export class ExPrecisionComponent {}

src/main/test/modules/input-number/required/required.component.html

@@ -0,0 +1,15 @@
+<x-row>
+  <x-col>
+    <x-input-number required [(ngModel)]="value"></x-input-number>
+  </x-col>
+</x-row>
+<x-row>
+  <x-col>
+    <x-input-number label="用户名" required [(ngModel)]="value"></x-input-number>
+  </x-col>
+</x-row>
+<x-row>
+  <x-col>
+    <x-input-number icon="ado-user" required [(ngModel)]="value"></x-input-number>
+  </x-col>
+</x-row>