Question

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

有人可以告诉我这段代码有什么问题吗？当我提交并在值部分中进行安慰时，它是空白的。为什么会这样？

Answer 1

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

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

这可能对你有所帮助，如果这段代码不起作用，那么与我分享你的角度组件，这样我就可以帮到你了

动态单选按钮值不以角度4提交

1 个答案: