Solution 1 :

You are using angular forms a little differently!

First you need to create a form in the component.ts file, add a formcontrol to it. Use it in the HTML and then you can check for errors!

// In component.ts file, 

someForm = new FormGroup({
 someFormControl: new FormControl('')

// In HTML file 

<div [formGroup]="someForm">
      placeholder="Sample Input text"

   // Use ngIf directive here to check the value

  <span *ngIf="!someForm.controls.someFormControl.value"> 
      My error message 

// The exclamation point will check if there is a value or not. if a value is there, that error message wont be shown; but if there is no value in the input field, this error will be shown

Solution 2 :

Try this

<input name="text" id="textType" type="text" class="form-control" /> 
<span class="form-control-feedback" *ngIf="textType.value.length === 0">
My message message

Problem :

I have an input tag..

<form name="patientSearchForm">

<input name="text" id="textType" type="text" class="form-control" /> 
<button type="submit">Submit Form</button><br /><br />

How to display the message that input field cant be empty using ng-if.
I am using

<span style="color:Red" ng-if="!textType.value" ng-show="patientSearchForm.$submitted"> My message </span> 

But it is not working . Please help.


Comment posted by

If you wannt to validate element as required, you can use this tutorial: