1

I want to get Text in input type="numer".

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

I want:

  1. Show one message when the field is empty
  2. Show another message when the input in the field is not valid

in my ts class I do:

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

the problem is show the second message because in my formControll (when the input is 22...) it gives me that this.home is null and so it gives me the first error. How can access to text in input type numer or what I have to do? Anyone can help me? (I use form template driven)

Improve this question
5
  • What is your condition for an invalid input? Commented Oct 19, 2018 at 10:35
  • @SiddAjmera is 10.10 or 100.00 or 100 or 100.0 ( no limit for interger parts and at least 2 digits in decimal parts) but this is an error input 45.. or 100. Commented Oct 19, 2018 at 10:37
  • Sorry. didn't really get that. Could you please clearly state the condition when it would be valid and when it would be invalid. Maybe add that to your question. Commented Oct 19, 2018 at 10:38
  • @SiddAjmera I want to show two error message. First message :"if input is empty" I show this message (empty field). Second message is when the use input this value (10..,10. ) and I show this message ("Invalid Field"). The problem is with the input type ="number" field when there is a empty field and an invalid field is the same thing because the variable "home" became null Commented Oct 19, 2018 at 10:48
  • I've added an answer that could be a solution to your issues. Please have a look. Commented Oct 19, 2018 at 11:25

4 Answers 4

Reset to default
3

Since you're using Template Driven Forms, you could use required and pattern="^[0-9]+\.[0-9][0-9]$" attributes to achieve what you want to.

In case of showing errors, you could then apply a template variable to the home field and assign it ngModel(#home="ngModel").

Then you can show errors depending on the value of home.errors

Try this:

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

Here's a Sample StackBlitz for your ref.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I find a bug in your solution if I put in input this value "....", the message must be "Invalid " and not "required"
0

First of all you cannot set the string value to the number type control.

If you want to set the message on the basis of input type value. Then you can use the (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
 }
}
Improve this answer

5 Comments

your solution is work but it not correct for me in this case, because I need to show different error and not a generic error!
You cannot set the string value to number field.
Updated the answer, hope that will help if not then elaborate your question further.
I try your solution but is not correct , the problem is still here. The problem is this: when I put the error in my input type "number", the value (in your example) became null, so I can't do the check if is empty or is not valid
Your requirement is pretty unclear. Would be better if you could explain in detail.
0

If you want some content as text in input type number then you can use a placeholder too, besides that.

This can also be done using Angular's Form Validations

Using ngModel in a form gives you more than just two-way data binding. It also tells you if the user touched the control, if the value changed, or if the value became invalid.

The NgModel directive doesn't just track state; it updates the control with special Angular CSS classes that reflect the state. You can leverage those class names to change the appearance of the control

You can make use of

  1. ng-valid or ng-invalid to get true or false on the type of validity

  2. ng-dirty and ng-pristine to know if the user has changed the default value

  3. ng-touched or ng-untouched to know if the the user has reacted or touched the input field

Example snippet

<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 on Angular Validation

Or you could call an event as 

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

Then in your .ts file

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;
 }
}
Improve this answer

Comments

-1

Try adding import { FormsModule } from '@angular/forms'; to your app.module.ts file.

Improve this answer

1 Comment

I have just import FormsModule, but it doesn't work!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.