Question

我在使用表单中的单选按钮列表时遇到问题。在我的代码下面。
查看

<form novalidate (ngSubmit)="onSubmit()" [formGroup]="perito">
    <div class="form-group row">
        <table class="table">
            <thead></thead>
            <tbody>
                <tr *ngFor="let p of periti">
                    <td>{{p.nome}} {{p.cognome}}</td>
                    <td>{{p.indirizzo}} {{p.civico}} - {{p.cap}} 
                        {{p.comune}}
                    </td>
                    <td><input formControlName="idPerito" type="radio" [value]="p.id" (change)="onSelect(p.id)"></td>
                </tr>
            </tbody>
        </table>
    </div>
</form>

控制器

perito: FormGroup;
ngOnInit() {
    this.perito = new FormGroup({
        idPerito: new FormControl()
    });
}
onSelect() {
    console.log(this.perito.value);
}

问题在于，当我选择一个单选按钮时：

所有其他单选按钮也被选中
表单对象未定义

管理单选按钮列表的正确方法是什么？感谢。

编辑 - 这就是我填充periti数组的方式：

this.peritiSrv.getPeriti()
    .then(res => {
        this.periti = res;
     })
     .catch();

无论如何，两个periti对象的id不能相同，因为它们是主键。

Answer 1

您的表单对象可能是undefined，因为它在创建组件时未实例化（construct ed）。尝试将formGroup创建行从constructor挂钩移动到该组件的ngOnInit()正文，

控制器

perito: FormGroup;
constructor() {
    this.perito = new FormGroup({
        idPerito: new FormControl('')
    }); // empty string passed in as the initial value of the FormControl instead of no argument
}
// no ngOnInit() implementation
onSelect() {
    console.log(this.perito.value);
}

查看问题是否仍然存在。

Angular - 单选按钮列表不起作用

1 个答案: