In the process of developing an Ionic 4 application, I am faced with a challenge where I need to fill in multiple form fields using the Ionic speech-recognition plugin. Currently, I am only able to populate one field at a time. What I am looking for is a way to extract multiple inputs from the speech recognition and assign those values to different input fields within the form.
Displayed below is the HTML code used:
<form [formGroup]="myForm">
<ion-item>
<ion-label position="stacked">FirstName</ion-label>
<ion-input formControlName="firstName"></ion-input>
<ion-button color="primary" fill="outline" (click)="startListening('firstName')" slot="end">
<ion-icon name="mic"></ion-icon>
</ion-button>
</ion-item>
<ion-item>
<ion-label position="stacked">LastName</ion-label>
<ion-input formControlName="lastName"></ion-input>
<ion-button color="primary" fill="outline" (click)="startListening('lastName')" slot="end">
<ion-icon name="mic"></ion-icon>
</ion-button>
</ion-item>
<ion-button color="primary" expand="full" (click)="onSubmit()">Submit Form</ion-button>
</form>
Highlighted below is my TypeScript Code:
startListening(fieldName: string) {
this.plt.ready().then(() => {
const options = {
language: 'en-US'
};
// Initiating the recognition process
this.speechRecognition.startListening(options)
.subscribe(
(matches: string[]) => {
console.log(matches);
this.myForm.patchValue({[fieldName]: matches[0]});
this.cdRef.detectChanges();
},
(onerror) => this.presentToast(onerror)
);
});
}
As I brainstormed for potential solutions, I contemplated creating distinct methods for each input field so that each button could trigger a unique method linked to it for capturing a specific value from the speech recognition. Is there an alternative approach to acquiring multiple values through a single startListening() method? This would enable me to effectively utilize these values to complete the form submission seamlessly.
I welcome any assistance on this matter. Thank you in advance!