javascript - 未触发 Angular 4 单击按钮功能

Question

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

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

Answer 1

正确的方法

根据@edkeveked 的建议，将type="button" 改为type="submit"

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

但是你可以通过方法而不是使用纯 JavaScript 代码来传递模型对象

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

或者使用双向绑定(bind)

(点击)="addLocation()"

和 ts 可能是

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