Dynamic Radio button value not submitting in angular 4

Question

I have a form done in template driven format. The radio buttons are dynamic. I am unable to get the value in the .ts file after submitting the form. I am providing the code snippet below.

The json array from which the radio buttons are generating.

private modalArray = [ { name:'Bread Type', choicetype:"single", child:[ { id:1, name:"Roasted Bread", value:"roasted", default:"roasted" }, { id:2, name:"Multi grain Bread", value:"multigrain", default:"" }, { id:3, name:"Bishakto Bread", value:"bishakto", default:"" } ] } ];

The html part:

<form #customChoiceform="ngForm" (ngSubmit)="addToCart(customChoiceform)">
<div *ngIf="popupConfirmation" class="popmain fade-in">            
    <div class="pop-head">
        <span (click)="popupConfirmation=false" class="pop-close"><i class="fa fa-times" aria-hidden="true"></i></span>
        <h3 class="main-subheading-type2"><span [ngClass]="{'ft-nonveg' : popupMenuVegStatus== '1' , 'ft-veg' : popupMenuVegStatus== '0' }" class="food-type"></span> Customize {{ popupMenuName }}</h3>
        <span class="item-main-price">420</span>
    </div>
    <div class="pop-tab">
        <ul>
            <li *ngFor="let modal of modalArray; let i = index"  
            [ngClass]="{'active' : i== 0 }">
                <a href="">{{ modal.name }}</a>
            </li>
        </ul>
    </div>

        <div class="pop-mid">
            <div class="pop-tab-block">

                <div *ngFor="let modal of modalArray" class="pop-tab-item">
                    <h2 class="main-subheading-type2">{{ modal.name }}</h2>

                    <ul>
                        <li *ngFor="let choice of modal.child">
                            <span class="food-type ft-veg"></span>
                            <div *ngIf="modal.choicetype=='single'" class="rsnt-opt-chk">


                                <input 
                                    type="radio" 
                                    value="{{choice.value}}" 
                                    name="choices" 
                                    [(ngModel)]="choices"
                                    #genderControl="ngModel"
                                />
                                <label>{{ choice.name }}</label>
                            </div>
                            <div *ngIf="modal.choicetype=='multiple'" class="rsnt-opt-chk">
                                <input  type="checkbox">
                                <label>{{ choice.name }}</label>
                            </div>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
        <div class="pop-foot">
            <div class="pop-added-items">
                <div class="row">
                    <div class="col-8">

                    </div>
                    <div class="col-4 tar">
                    </div>
                </div>
            </div>
            <button class="checkout-btn" value="Checkout" type="submit">total <span class="item-main-price"> 450</span><span class="dblk mart-10">Done</span></button>
        </div>

</div>
</form>

Can anyone please tell me what is wrong with this code? When i am submitting the and consoling it in the value section is blank. Why this is happening?

Answer 1

First, you didn't set id of your input and second is the model is not unique for each value

    <input 
                                type="radio" 
                                value="{{choice.value}}" 
                                name="choices" \
                                id
="my-{{choice.value}} "                                        [(ngModel)]="modal.choices"
                                        #genderControl="ngModel"
                                    />

this may help you and if this code don't work then share your angular component with me so i can help you