默认情况下，无法使用 Ionic 4 在 Angular 中预先选择表单中的单选按钮

Question

我正在使用Ionic创建一个带有单选按钮的表单。默认情况下，我正在尝试检查单选按钮，但没有任何效果。我尝试了几个选项，包括：

选中 ={{选定}} (在 ts 中选定=真)

选中="真">

检查

[选中]= "真">

尝试在初始化表单时直接添加值，但仍然不起作用

什么都没用。有人有什么建议吗？

<form [formGroup]="FormName" (ngSubmit)=sendData()>
<ion-list>
<ion-list-header>
<ion-label>One</ion-label>
</ion-list-header>
<ion-radio-group [formControlName]="'products'">
<ion-item>
<ion-label>{{value1}}</ion-label>
<ion-radio slot="start" value={{value1}} checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>{{value2}}</ion-label>
<ion-radio slot="start" value={{value2}}'></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
</form>

打字稿：

this.FormName = new FormGroup({
products: new FormControl()
});

Answer 1

下面是一个如何在无线电组上设置默认值的小示例。

假设这是您的模板文件：

<form (submit)="doSubmit($event)" [formGroup]="langForm">
<ion-list radio-group formControlName="langs">
<ion-list-header>
Language
</ion-list-header>
<ion-item>
<ion-label>Go</ion-label>
<ion-radio value="golang" checked="true"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Rust</ion-label>
<ion-radio value="rust"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Python</ion-label>
<ion-radio value="python"></ion-radio>
</ion-item>
</form>

在您的页面组件上，您需要执行以下操作：

@Component({
templateUrl: 'page-template.html'
})
export class BasicPage {
langs;
langForm;
constructor() {
this.langForm = new FormGroup({
"langs": new FormControl({value: 'rust', disabled: false})
});
}
}

请记住，您需要将单选按钮标记为选中状态，并将该给定元素的值作为单选组值。在此示例中，带有元素rust的离子无线电标记为选中，并且给定的离子无线电组的值为rust