How to fill all the ionic form fields using speech recognition?

Question

I am creating a ionic 4 application that has a form and that form gets filled by ionic speech-recognition plugin. I am able to fill only one field of the form but how can i take multiple inputs from the speech-recognition and set those value into multiple input fields of the form.

Below is my HTML code:

<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()" 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()" 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>

Below is my Typescript Code:

startListening() {
    this.plt.ready().then(() => {
      const options = {
        language: 'en-US'
      };
      // Start the recognition process
      this.speechRecognition.startListening(options)
        .subscribe(
          (matches: string[]) => {
            console.log(matches);
            this.myForm.patchValue({firstName: matches[0]}); //I want to patch values of multiple fields like this.
            this.cdRef.detectChanges();
          },
          (onerror) => this.presentToast(onerror)
        );

    });
  }

When I was thinking for a better possible solution, I realized that I can create multiple methods for all the input fields so that each button will call unique method bind to it for entering a unique value from the speech recognition. Is there any other way to input multiple values from a single startListening() method, So that i can use those multiple input values to fill the form?

Help is appreciated, thanks in advance!

score 0 · Answer 1 · answered Sep 20 '19 at 14:44

You need to pass that information down.

Based on this answer about using a variable as the key you can write it like this:

HTML

<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>

Code

  startListening(keyName) {
    this.plt.ready().then(() => {
      const options = {
        language: 'en-US'
      };
      // Start the recognition process
      this.speechRecognition.startListening(options)
        .subscribe(
          (matches: string[]) => {
            console.log(matches);
            this.myForm.patchValue({[keyName]: matches[0]}); //I want to patch values of multiple fields like this.
            this.cdRef.detectChanges();
          },
          (onerror) => this.presentToast(onerror)
        );

    });
  }

How to fill all the ionic form fields using speech recognition?

1 Answers1

HTML

Code