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">
  <input 
      name="someFormControl" 
      formControlName="someFormControl"
      placeholder="Sample Input text"
   />

   // Use ngIf directive here to check the value

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

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


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

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

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.

Comments

Comment posted by angular.io/guide/form-validation

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

By