Question

我正在尝试检查文本输入是否为空或角度为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文件

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

或使用双向绑定

(click)="addLocation()"

和ts可能是

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

Answer 2

使用col-md-*代替type="button"

对于type="submit"类型，该按钮没有默认行为。它可以具有与元素事件关联的客户端脚本，这些事件在事件发生时触发，而类型button则尝试进行表单提交操作。要以角度捕获该操作，您需要使用事件绑定到submit。

由于您没有使用表单来处理点击操作，因此可以采用以下方式。

(ngSubmit)

Answer 3

你在做什么都没事。只需进行一次小修正即可。如果您使用type submit，则会提交整个表单。通常，它带有Angular 4/5反应形式。如果您将类型设置为button，则可以触发在click事件中声明的方法。

更正后的代码： -

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

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

3 个答案: