У меня есть форма, созданная в формате, управляемом шаблоном. Радиокнопки динамические. Я не могу получить значение в файле .ts после отправки формы. Я предоставляю фрагмент кода ниже.

Массив json, из которого создаются переключатели.

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:"" } ] } ];

HTML-часть:

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

Кто-нибудь может сказать мне, что не так с этим кодом? Когда я отправляю и утешаю его, в разделе значений пусто. Почему это происходит?

0
Sandip Nag 13 Май 2018 в 22:13

1 ответ

Лучший ответ

Во-первых, вы не установили идентификатор своего ввода, а во-вторых, модель не уникальна для каждого значения.

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

Это может вам помочь, и если этот код не работает, поделитесь со мной своим угловым компонентом, чтобы я мог вам помочь

1
bhaumik shah 14 Май 2018 в 09:19