angular 4 click button function is not fired

Question

I am trying to do a check if a text input is empty or not in angular 4. I am not using forms for this. It's just an input field. When I execute the addLocaton function in the button below the check needs to happen.

my input field

<ion-input type="text" placeholder="Enter a Town, Province or City" name="newPlace" [(ngModel)]="newPlace" id="empty"></ion-input>

<button ion-button block type="submit" (click)="addLocation()">ADD AND SAVE MORE LOCATIONS</button>

ts file

  addLocation(){
     if( document.getElementById('empty').value === '' ){
          alert('empty');
     }
  }

Its unnecessary to make document.getElementById you can simply go for the model newPlace and check if its either '' or 'Enter a Town, Province or City' — Doomenik
– Doomenik, Commented Apr 20, 2018 at 5:00

Ramesh Rajendran · Accepted Answer · 2018-04-20 05:16:31Z

4

The proper way

change type="button" instead of type="submit" as the suggestion from @edkeveked

 <button ion-button block type="button" (click)="addLocation(newPlace)">ADD AND SAVE MORE LOCATIONS</button>

But you could do this way for passing the model object via method instead of using plain JavaScript code

addLocation(newPlace){
     if(newPlace === '' || newPlace === undefined ){
          alert('invalid');
     }
  }

or use the two way binding

(click)="addLocation()"

and ts could be

addLocation(){
         if(this.newPlace === '' || this.newPlace === undefined ){
               alert('invalid');
         }
      }

edited Apr 20, 2018 at 5:16

answered Apr 20, 2018 at 5:10

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

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

2 Comments

RRB Over a year ago

newPlace was returning undefined, so I needed to also check if === undefined

Ramesh Rajendran Over a year ago

@eohdev exactly. first time the object is undefined . because you didn't assign empty value in ngOnInit

edkeveked · Accepted Answer · 2018-04-20 06:34:14Z

2

Use type="button" instead of type="submit"

With the type button the button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur whereas with the type submit it tries to make a form submit action. To catch that action in angular, you need to use the event binding to (ngSubmit).

Since you're not using form, to handle your click action, here is the way to go.

<button ion-button block type="button" (click)="addLocation()">ADD AND SAVE MORE LOCATIONS</button>

edited Apr 20, 2018 at 6:34

answered Apr 20, 2018 at 5:01

edkeveked

18.4k10 gold badges60 silver badges95 bronze badges

2 Comments

RRB Over a year ago

solution was to do this

addLocation(){      if( (this.newPlace === '') || (this.newPlace === undefined) ){       alert('empty');     }     else{       //execute functionality     }    }

edkeveked Over a year ago

Yes, you can use the two binding to check and in that case you will remove the click action.

Collectives™ on Stack Overflow

angular 4 click button function is not fired

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related