Как получить текст в поле ввода type=number angular

Поскольку вы используете шаблонные формы, вы можете использовать атрибуты 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>

Вот Образец StackBlitz для вашего исх.

Прежде всего, вы не можете установить строковое значение для элемента управления числового типа.

Если вы хотите установить сообщение на основе значения типа ввода. Затем вы можете использовать (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
 }
}

Если вам нужен некоторый контент в виде текста в номере типа ввода, вы также можете использовать заполнитель, помимо этого.

Это также можно сделать с помощью проверки формы Angular.

Использование ngModel в форме дает вам больше, чем просто двустороннюю привязку данных. Он также сообщает вам, коснулся ли пользователь элемента управления, изменилось ли значение или значение стало недействительным.

Директива NgModel не просто отслеживает состояние; он обновляет элемент управления специальными классами CSS Angular, которые отражают состояние. Вы можете использовать эти имена классов, чтобы изменить внешний вид элемента управления.

Вы можете использовать

1. ng-valid или ng-invalid, чтобы получить значение true или false для типа проверки

2. ng-dirty и ng-pristine, чтобы узнать, изменил ли пользователь значение по умолчанию.

3. 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>

Для получения дополнительной информации о проверке 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;
 }
}

Попробуйте добавить import { FormsModule } from '@angular/forms'; в файл app.module.ts.