Ionic 2 - 键盘上的输入“Go”字段正在做两件事

Question

我正在为 iOS 和 Android 构建一个 Ionic 应用程序，到目前为止，我有一个表单，用户可以在其中上传或拍照，然后填写一些其他信息并提交表单。

我的问题：

目前，当用户转到 Input 输入一些额外的文本时，键盘底部有一个 go 按钮。如果用户单击此“开始”按钮，它会尝试提交表单并打开我拥有的 choosePicture() 函数。

当我点击 Go button - it opens the Library

HTML

<ion-item class="file-upload">
    <button  class="btn btn-block" ion-button (click)="choosePhoto()">Choose a Photo</button>
    <span class="sep"></span>
    <button class="btn btn-block" ion-button (click)="takePicture()">Take a Picture</button>
    <div class="uploaded-img">
        <input type="file" value="" formControlName="hazardImage" hidden />
        <span class="img-desc">Please Take or Upload an Image.</span>
        <div class="img-picked" *ngIf="base64Img">
            <img [src]="base64Img" alt="Hazard Picture" />
            <!-- <img src="http://placehold.it/300x300" alt="Test Image" /> -->
        </div>
    </div>
</ion-item>

<small class="small-title">Where is the Hazard Location? (required)</small>
<ion-item class="input-box">
    <ion-input type="text" formControlName="hazardLocation" [class.invalid]="!hazardForm.controls.hazardLocation.valid && (hazardForm.controls.hazardLocation.dirty || submitAttempt)"></ion-input>
</ion-item>

打字稿：

choosePhoto()
{
    this.Camera.getPicture({
        quality: 50,
        destinationType: this.Camera.DestinationType.DATA_URL,
        encodingType: this.Camera.EncodingType.JPEG,
        sourceType: this.Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: true
    }).then((ImageData) => {
        // console.log(ImageData);
        this.base64Img = ImageData;
        this.hazardForm.patchValue({
            hazardImage: this.base64Img
        });
    }, (err) => {
        console.log(err);
    })
}

我不明白为什么Go按钮打开了选择照片的功能：/

Answer 1

您可以修改“开始”键盘按钮的行为：

@ViewChild('input-box') inputElm: ElementRef;
@HostListener('keyup', ['$event'])
keyEvent(e) {

if(!e.srcElement) return; //browser fix
var code = e.keyCode || e.which;
if (code === 13) {
  if (e.srcElement.tagName === "INPUT") {
    e.preventDefault();
    //handle other behaviours
  }
}
};

Answer 2

您已将“危险位置”的<input> 定义为表单，因为存在formControlName="hazardLocation" 属性。这使得Go 或表单提交按钮出现在移动键盘中。

相反，您应该将其作为普通输入字段，像这样

<input [(ngModel)]="hazardLocation">