模板驱动表单中的单选按钮

Question

每次加载页面时，总是选中最后一个单选按钮。我知道这与 Id 有关，但我不知道如何解决它。

国家数组

countryA = [{name : "Finland"}, {name : "china"},{name :  "USA"}]

test.html

            <form #filterForm="ngForm" (ngSubmit)="addFilter(filterForm)" autocomplete="off">
                <div class="row">
                    <div class="col-12" style="border: 1px solid red">
                        <div *ngFor="let x of country">
                            <label for="{{x.name}}"> {{x.name}} </label>
                            <input type="radio" id="{{x.name}}" value="{{x.name}}" name="countries" [(ngModel)]='x.name' >
                        </div>
                    </div>
                    <!-- <div class="col-12" style="border: 1px solid red">b</div>
                    <div class="col-12" style="border: 1px solid red">c</div>
                    <div class="col-12" style="border: 1px solid red">D</div> -->
                </div>
            </form>
            hh : {{filterForm.value | json}}

Answer 1

您应该向每个国家/地区添加一个选定的属性以用作单选按钮值的 ngModel：

在构造函数中：

this.country = this.country.map(item =>({ name: item.name , selected : false }));

在html中：

<div class="col-12" style="border: 1px solid red">
    <div *ngFor="let x of country; index as i">
        <label for="{{x.name}}"> {{x.name}} </label>
        <input type="radio" id="{{x.name}}" value="{{x.name}}" name="countries" [(ngModel)]="country[i].selected">
    </div>
</div>

检查demo。

Answer 2

您正在将 ngModel 应用到 'x.name'，这是检查它的原因。您可以创建一个变量 selectedRadio 并为单选按钮分配值：

<div *ngFor="let x of country">
    <label for="{{x.name}}"> {{x.name}} </label>
    <input type="radio" 
        id="{{x.name}}" 
        value="{{x.name}}"
        [(ngModel)] ="selectedRadio"
        name="countries">
</div>
<p> {{ selectedRadio | json }} </p>

打字稿：

selectedRadio: any;

堆栈闪电战 example can be seen here。

模板驱动表单中的单选按钮

Radio buttons in Template-Driven Forms

javascript

angular

typescript

angular7

ngfor