如何使用语音识别填充所有离子表单字段？

Posted 2023-03-13

【中文标题】如何使用语音识别填充所有离子表单字段？

【英文标题】：How to fill all the ionic form fields using speech recognition?

【发布时间】：2020-01-21 11:07:21

【问题描述】：

我正在创建一个具有表单的 ionic 4 应用程序，该表单由 ionic 语音识别插件填充。我只能填写表单的一个字段，但是如何从语音识别中获取多个输入并将这些值设置到表单的多个输入字段中。

下面是我的 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>

下面是我的打字稿代码：

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

您需要将这些信息传递下去。

基于this answer about using a variable as the key你可以这样写：

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

    );