Get dynamic radio button value in angular2

Question

I am trying to populate some questions with some dynamic answers, but it isn't working for me.

Everything works fine but I don't understand how to get this dynamic radio button value with a question like :

General Assessment of the Programme:Good
Quality of the Material Provided:Excellent
Design of the Programme:Excellent

How do I get this data?

HTML

 <table class="table table-bordered" *ngFor="let item of  QuestionMaster.Questions let i=index">
    <tr>
        <td colspan="5">
            <h5><b>{{i+1}}. {{item.question1}}</b></h5> 
        </td>
    </tr>
    <tr>
        <td  align='center' valign="center" *ngFor="let items of  QuestionMaster.Ratings let i=index">
            {{items.description}}
        </td>                   
    </tr>
    <tr>
        <td  align='center' *ngFor="let items of  QuestionMaster.Ratings let i=index">
            <input type="radio" id="{{items.rateno}}" name="{{item.rowid}}" />
        </td>                   
    </tr>
</table>

json

{ 
    "Questions": [ 
        { "quid": 1, "question1": "General Assessment of the Programme ", "rowid": 1 }, 
        { "quid": 2, "question1": "Quality of the Material Provided ", "rowid": 2 }, 
        { "quid": 3, "question1": "Design of the Programme ", "location": "Pune", "username": "mdppune", "rowid": 3 }, 
        ...
    ], 
    "Ratings": [ 
        { "rateid": 1, "rateno": 1, "description": "Poor" }, 
        { "rateid": 2, "rateno": 2, "description": "Fair"}, 
        { "rateid": 3, "rateno": 3, "description": "Good"}, 
        { "rateid": 4, "rateno": 4, "description": "Very Good"}, 
        { "rateid": 5, "rateno": 5, "description": "Excellent"} 
    ]
}

You can try to achieve that with ngModelChange. In your template add this to your input (ngModelChange)="onSelect($event)". In your component onSelect(val) {//retrieve your value} — mickdev
– mickdev, Commented Feb 3, 2017 at 10:13
I want to get data when I am click on **button click event ** then I want to take all question with answer — User
– User, Commented Feb 3, 2017 at 11:27
Ok, so you must tell us more about your form. Is it template driven ? Reactive form ? In the first case, you can display your form to see if you get the excepted values like this get diagnostic() { return JSON.stringify(this.model); }. In the second case, you can subscribe to the change event : this.yourForm.valueChanges .subscribe(data => { this.output = data }) — mickdev
– mickdev, Commented Feb 3, 2017 at 11:46
@mickdev i confuesd pls i have given json data and html design so please can you put in fiddler — User
– User, Commented Feb 3, 2017 at 11:52
@Girish Rathod gives you an example for template driven model below. — mickdev
– mickdev, Commented Feb 3, 2017 at 12:30

AVJT82 · Accepted Answer · 2017-02-08 18:44:25Z

Template driven form:

Some changes to Girish's answer, since it wasn't working, at least for me. So if you are using newer Angular versions you need to bind the name value of each form input with ngModel to get the values bound to the form.

Also to your desired output:

General Assessment of the Programme:Good
Quality of the Material Provided:Excellent
Design of the Programme:Excellent

you need to change name="{{item.rowid}}" in the following snippet

<input type="radio" id="{{items.rateno}}" name="{{item.rowid}}" />

to

<input type="radio" [value]="items.description" name="{{item.question1}}" ngModel/>

and as said, use ngModel and also set a [value] because if you do not set that, all radio buttons from that same line will get checked upon choosing a radio button.

Upon submit, you now get your desired output as well, like:

{
  "General Assessment of the Programme ":"Poor",
  "Quality of the Material Provided ":"Fair",
  "Design of the Programme ":"Good"
}

Girish Rathod · Accepted Answer · 2017-02-03 11:42:10Z

2

You can use form and can get all values like this:

<form #queForm="ngForm" novalidate (ngSubmit)="submitForm($event, queForm.value)" class="form-horizontal">
       <table class="table table-bordered" *ngFor="let item of  QuestionMaster.Questions let i=index">
       <tr>
          <td colspan="5">
             <h5><b>{{i+1}}. {{item.question1}}</b></h5>
          </td>
       </tr>
       <tr>
          <td  align='center' valign="center" *ngFor="let items of  QuestionMaster.Ratings let i=index">
             {{items.description}}
          </td>
       </tr>
       <tr>
          <td  align='center' *ngFor="let items of  QuestionMaster.Ratings let i=index">
             <input type="radio" name="{{item.rowid}}" [ngModel]="item.rowid" #rowid="ngModel" id="{{items.rateno}}" />
          </td>
       </tr>
       <tr>
          <td>
             <button type="submit" class="btn btn-primary btn-lg"> Submit </button>
          </td>
       </tr>
      </table>
</form>

And in controller side

submitForm(event: any, model: any) {
    console.log(' model ' + JSON.stringify(model)); /*--- Display your model value here -----*/
}

answered Feb 3, 2017 at 11:42

Girish Rathod

6367 silver badges14 bronze badges

1 Comment

Girish Rathod Over a year ago

You can create form and add submit button. In controller you will get model with select radio button value. Still let me know what you didn't get in this.

Collectives™ on Stack Overflow

Get dynamic radio button value in angular2

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related