Question

我是angular的新手，我正试图在数字输入字段中限制可能的值。

我希望值大于0并且永远不会在字段中显示任何其他值。

我尝试通过设置min参数来做到这一点，但这只适用于箭头。我仍然可以手动插入值（例如，键入-10）。

我可以覆盖组件中的值，但输入字段仍显示无效值。

当我检测到输入错误时，如何覆盖输入字段值？

例如：我输入-10，输入字段立即显示为1。

html代码：

<p>
  <input type="number" [ngModel]="numberValue" (ngModelChange)='onInputChange($event)' 
   min=1>
</p>

组件代码：

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})


export class TestComponent implements OnInit {
    numberValue:number = 1;
    ngOnInit(){
    }
    onInputChange(value:number){
    this.numberValue = Math.max(1,value);
      }
    }

Answer 1

我认为你拼错了 [（ngModel）] 的语法（框中的香蕉）。因此，您需要更新 html 文件，如下所示：

<p>
  <input type="number" [(ngModel)]="numberValue" (ngModelChange)='onInputChange($event)' 
   min=1>
</p>

在您的组件 ts 文件中，您可以访问传递到$event函数的onInputChange()的值，如下所示：

onInputChange(event){
    this.numberValue = Math.max(1,event.target.value);
}

希望它有所帮助！

Answer 2

您还需要更改html和typescript文件，如下所示 在HTML中

<p> <input type="number" [(ngModel)]="numberValue" (keyup)='onInputChange($event)' min=1></p>

在打字稿中

onInputChange(e){
this.numberValue = Math.max(1,e.target.value);
  }

Answer 3

HTML代码。

<p>
  <input type="number" [(ngModel)]="numberValue" (ngModelChange)='onInputChange($event)' 
   min=1>
</p>

将括号和括号与ngModel一起使用，如[(ngModel)]="numberValue"

Angular class。

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})

export class TestComponent implements OnInit {
  numberValue: number = 1;

  constructor(private cdRef: ChangeDetectorRef) { }

  ngOnInit() { }

  onInputChange(value: number) {
    this.cdRef.detectChanges();
    this.numberValue = Math.max(1, value);
  }
}

使用ChangeDetectorRef更新ngModel。

覆盖html输入字段值

3 个答案: