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

Question

Я хочу получить текст в поле ввода type = "numer".

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

Я хочу:

1. Показывать одно сообщение, когда поле пусто
2. Показать другое сообщение, когда ввод в поле недопустим

в моем классе 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]$" для достижения того, чего вы хотите.

В случае появления ошибок вы можете применить переменную шаблона кполе 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>

Вот Образец StackBlitz для вашей ссылки.

Answer 2

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

Answer 3

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

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

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

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

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

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

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

3. ng-touched или ng-нетронутым , чтобы узнать, отреагировал ли пользователь на поле ввода или коснулся его

Пример фрагмента

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

Для получения дополнительной информации об угловой проверке

Или вы можете вызвать событие как

 <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

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

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