Problem with ng-if to check if input field is empty or not

Question

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.

If you wannt to validate element as required, you can use this tutorial: angular.io/guide/form-validation — PanterP
– PanterP, Commented Jan 12, 2021 at 14:44

Srikar Phani Kumar M · Accepted Answer · 2021-02-10 03:57:36Z

3

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>

answered Feb 10, 2021 at 3:57

Srikar Phani Kumar M

1,3921 gold badge5 silver badges9 bronze badges

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

Comments

Naveen · Accepted Answer · 2021-01-12 12:19:02Z

1

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>

answered Jan 12, 2021 at 12:19

Naveen

3963 silver badges12 bronze badges

Collectives™ on Stack Overflow

Problem with ng-if to check if input field is empty or not

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related