angular 4 click button function is not fired

问题:

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');
     }
  }

回答1:

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');
         }
      }

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

回答3:

What you are doing is all right. Just a small correction would do the thing for you. If you use type as submit then the entire form gets submitted. Normally this ships with Angular 4/5 reactive forms. if you set the type as a button you will be able to fire the method which is declared in the click event.

corrected code:-

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