Send template driven form's field value

Question

I have used Angular template driven dynamic form as shown below.I know how to send all values of form when pressing a submit button. We can send it as f.value. But I need to send the textbox value on this method (click)="goToNext(sendUserEnteredTextBoxValueHere)".How can I do that?

Note: Here I'm using one-way data binding.

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

Pramod Patil Pramod Patil · Accepted Answer · 2017-05-02T07:37:57

You can assign ngModel with name and send it to the function. But If you are using the same class, you dont need to send any values from function however it will be availbel in class itself. Check below the way

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

Send template driven form's field value

1 Answers