在 Angular 中使用 Ionic 4 默认无法预先 select 表单中的单选按钮

Question

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

checked ={{selected}}（在 ts 中选择=true）

选中= 'true'

已检查

[选中]='true'

尝试在初始化表单时直接添加值，还是不行

没有任何效果。有人有什么建议吗？

<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 的 ion-radio 被标记为选中，并且赋予 ion-radio-group 的值是 rust

在 Angular 中使用 Ionic 4 默认无法预先 select 表单中的单选按钮

Unable to pre-select the radio button in the form by default in Angular using Ionic 4

angular

ionic4