Question

我使用了Angular模板驱动的动态表单，如下所示。我知道在按下submit按钮时如何发送表单的所有值。我们可以f.value发送它。但我需要在此方法textbox上发送(click)="goToNext(sendUserEnteredTextBoxValueHere)"值。我该怎么做？

注意：这里我使用的是单向数据绑定。

<form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">

 <div *ngIf="question?.type=='textfield'">
   <ion-label>a. {{question?.prompt}}*</ion-label>
   <ion-input type="text" placeholder="{{question?.prompt}}" name="{{question?.name}}" ngModel> </ion-input>
   <button ion-button type="button" (click)="goToNext(sendUserEnteredTextBoxValueHere)"></ion-icon></button>
  </div>

  //having so many other dynamic HTML elements   

<button ion-button type="submit" [disabled]="f.invalid">Submit</button>

Answer 1

您可以为ngModel指定名称并将其发送给该函数。但是如果你使用的是同一个类，你不需要从函数中发送任何值，但它本身就是availbel。检查下面的方式

<form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">

    <div *ngIf="question?.type=='textfield'">
      <ion-label>a. {{question?.prompt}}*</ion-label>
      <ion-input type="text" placeholder="{{question?.prompt}}" name="{{question?.name}}" #name="ngModel"> </ion-input>
      <button ion-button type="button" (click)="goToNext(currentQuestionCode,name)"><ion-icon name="arrow-forward"></ion-icon></button>
    </div>

    //having so many other dynamic HTML elements   

    <button ion-button type="submit" [disabled]="f.invalid">Submit</button>
  </form>

发送模板驱动表单的字段值

1 个答案: