角度 4 单击按钮功能未触发

我正在尝试检查文本输入是否为空或不在角度 4 中。我没有为此使用表单。这只是一个输入字段。当我在下面的按钮中执行 addLocaton 函数时，需要进行检查。

我的输入字段

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

正确的方法

change type="button"代替type="submit"正如@edkeveked 的建议

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

但是您可以通过这种方式通过方法传递模型对象，而不是使用纯 JavaScript 代码

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

或使用双向绑定

(click)="addLocation()"

和 ts 可能是

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