时间戳

首页 > 解决方案 > 动态单选按钮值未以角度 4 提交

angular5 - 动态单选按钮值未以角度 4 提交

问题描述

我有一个模板驱动格式的表格。单选按钮是动态的。提交表单后，我无法获取 .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>

谁能告诉我这段代码有什么问题？当我在价值部分提交和安慰它时，它是空白的。为什么会这样？

标签： angular5

解决方案

首先，您没有设置输入的 id，其次是模型对于每个值都不是唯一的

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

这可能对您有所帮助，如果此代码不起作用，请与我分享您的角度组件，以便我为您提供帮助

推荐阅读