Question

我想要输入类型为“ numer”的文本。

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

我想要：

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

在我的ts班上，我这样做：

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

问题是显示第二条消息，因为在我的formControll中（当输入为22 ...时），它告诉我this.home为null，因此它给了我第一个错误。如何访问numer输入类型的文本或我该怎么做？有人可以帮助我吗？（我使用表单模板驱动）

Answer 1

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

如果显示错误，则可以将模板变量应用于主字段，并将其分配给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。

Answer 2

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

如果要基于输入类型值设置消息。然后，您可以使用(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 3

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

Answer 4

如果您希望某些内容作为输入类型数字中的文本，那么您还可以使用占位符。

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

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

NgModel指令不仅跟踪状态，还跟踪状态。它使用反映状态的特殊Angular CSS类更新控件。您可以利用这些类名来更改控件的外观

您可以利用

ng-valid或ng-invalid 来确定有效类型为真或错误
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关于角度验证

或者您可以将事件称为

 <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;
 }
}

如何获取输入类型为“数字”的文本

4 个答案:

html

ts