html - 使用表单组为 HTML 设置选择值

Question

在 Json Data 的基础上，我必须迭代一系列单选按钮，其中只能选择一个。

JSONDATA = Observable.of({ items: [ itemId:1, itemId:2, itemId:3 ]})

Formgroup 如下所示，由用户选择的 itemId 组成：

 this.myform = this.fb.group({
      mydata: ''
    });

迭代的 HTML 如下：

 <div *ngFor="let item of (items$ | async); index as i; first as first">
            <input type="radio" id="{{item.itemId}}" name="test" value="{{item.itemId}}"  [formControl]="myform.controls.mydata" >
    </div>

在特定场景中，如果 json 数据中只有一个 itemId，则必须预先选择单选按钮，并且表单应自动设置为该值，并且表单将变为 VALID。

我能够使用 formgroup setValue 设置数据：

this.myform.setValue(mydata , 1)

但在这种情况下，表单状态更改为有效，但在 HTML 中，未选中单选按钮。所以我试图通过将选中的附加到单选按钮来实现这一点

但这也给模板解析带来了错误。

所以基本上我希望如果数组只有一项，则预选单选按钮。

标签： htmlangulartypescriptformgroups