如何获取输入类型中的文本="number" angular

Question

我想获取输入类型中的文本="numer"。

<input type="number" class="form-control" [(ngModel)]="home" name="home" required min="0" step="1">

我要：

字段为空时显示一条消息
当字段中的输入无效时显示另一条消息

在我的 ts class 我做：

if(this.home==null){
//show message empy field
}

问题是显示第二条消息，因为在我的 formControll 中（当输入为 22... 时）它告诉我 this.home 为空，所以它给了我第一个错误。如何访问输入类型数字中的文本或我必须做什么？任何人都可以帮助我吗？（我用的是表单模板驱动）

Answer 1

首先不能将字符串值设置为数字类型控件

如果要根据输入类型值设置消息。然后你可以使用 (ngModelChange)="modelChanged($event)"

html

<input type="number" (ngModelChange)="modelChanged($event)" 
class="form-control" [(ngModel)]="home" name="home" required min="0" step="1">

ts

modelChanged(value){

 if(value==null){
    //show message empy field
 }
}

Answer 2

尝试将 import { FormsModule } from '@angular/forms'; 添加到您的 app.module.ts 文件。

Answer 3

如果您想要一些内容作为输入类型数字中的文本，那么您也可以使用占位符，除此之外。

这也可以使用 Angular 的表单验证来完成

在表单中使用 ngModel 为您提供的不仅仅是双向数据绑定。它还会告诉您用户是否触摸了控件、值是否更改或值是否无效。

NgModel 指令不只是跟踪状态；它使用反映状态的特殊 Angular CSS classes 更新控件。您可以利用这些 class 名称来更改控件的外观

你可以利用

ng-valid 或 ng-invalid 获取有效性类型的 true 或 false
ng-dirty 和 ng-pristine 了解用户是否更改了默认值
ng-touched 或 ng-untouched 了解用户是否有反应或触摸输入字段

示例片段

<input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel">

<div [hidden]="name.invalid" class="alert alert-danger">
    Name is required
</div>

<div [hidden]="name.pristine" class="alert alert-danger">
    No value entered yet
</div>

For more reference Angular 验证

或者您可以将事件称为

 <input type="number" class="form-control" [(ngModel)]="home" name="home" required min="0" step="1" (focusout)="callMethod($event)"> <=== here

<div *ngIf="showErrorOne==1"> Regex Error </div>
<div *ngIf="showErrorTwo==1"> Type Error </div>

然后在你的 .ts 文件中

callMethod(e)
{
var checkerVar = e.target.value
if(checkerVar.match(/(Your regex part)/)==false)
 {
  then.showErrorOne=1;
 }
else if(typeof(checkerVar)==string)
 {
  then.showErrorTwo=1;
 }
}

Answer 4

由于您使用的是模板驱动表单，因此您可以使用 required 和 pattern="^[0-9]+\.[0-9][0-9]$" 属性来实现您想要的。

如果出现错误，您可以将模板变量应用到 home 字段并将其赋值 ngModel(#home="ngModel").

然后可以根据home.errors

的值显示错误

试试这个：

<form 
  #form="ngForm" 
  (ngSubmit)="onFormSubmit(form)">

  <input 
    type="number" 
    name="home" 
    ngModel 
    #home="ngModel" 
    required
    class="form-control"
    min="0"
    pattern="^[0-9]+\.[0-9][0-9]$"
    >
  <br/>

  <div class="red" *ngIf="home.touched">
    <div *ngIf="home.errors?.required">
      Home is required!
    </div>
  </div>

  <div class="red" *ngIf="home.touched">
    <div *ngIf="home.errors?.pattern">
      Home is invalid!
    </div>
  </div>

  <button 
    type="submit"
    [disabled]="form.invalid">
    Submit
  </button>

</form>

这里有一个 Sample StackBlitz 供您参考。

如何获取输入类型中的文本="number" angular

How get text in input type="number" angular

angular-template

angular

angular6

html

ts