Как заполнить все поля ионной формы с помощью распознавания речи? - PullRequest
Новая
       55

Как заполнить все поля ионной формы с помощью распознавания речи?

1 голос
/ 20 сентября 2019

Я создаю приложение ionic 4, которое имеет форму, и эта форма заполняется модулем распознавания ионной речи.Я могу заполнить только одно поле формы, но как я могу взять несколько входов из распознавания речи и установить эти значения в несколько полей ввода формы.

Ниже приведен мой 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()" 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>

Ниже приведен мой 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)
        );

    });
  }

Когда я думал о лучшем возможном решении, я понял, что могу создать несколько методов для всех полей ввода, чтобы каждая кнопка вызывалауникальный метод привязки к нему для ввода уникального значения из распознавания речи.Есть ли другой способ ввода нескольких значений из одного метода startListening (), чтобы я мог использовать эти несколько входных значений для заполнения формы?

Помощь приветствуется, заранее спасибо!

1 Ответ

0 голосов
/ 20 сентября 2019

Вам нужно передать эту информацию.

На основании этого ответа об использовании переменной в качестве ключа вы можете написать ее так:

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>

Код 

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

    });
  }
...