I am building an Ionic App for iOS & Android and so far I have a form where users can upload or take a photo and then fill in some other information and submit the form.
My issue:
Currently when the user goes to an Input to enter some extra text there is a go button at the bottom of the keyboard. If the user clicks this ‘Go’ button it tries to submit the form along with opening the choosePicture()
function I have.
I have linked to a GIF below showing exactly what happens
Go opens the Library
The 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>
The TypeScript:
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);
})
}
I don’t understand why the Go
Button is opening the function for choosing a photo