将离子单选按钮表单连接到 Firebase 实时数据库答案

【问题标题】：Connect ionic radio button form to a firebase realtime database将离子单选按钮表单连接到 Firebase 实时数据库
【发布时间】：2020-03-14 13:53:07
【问题描述】：

我创建了一个包含单选按钮表单的离子应用程序。我在将单选按钮表单连接到 firebase 实时数据库时遇到问题。数据库应该能够存储用户在提交后选择的单选值。我已经在我的 ionic 应用程序中添加了 firebase。

这是我的代码

<form [formGroup]="ngForm" (submit)="submit()">
   <ion-list>
     <ion-radio-group formControlName="radioSelection">
       <ion-item>
          <ion-label>Option 1</ion-label>
          <ion-radio slot="start" value="1"></ion-radio>
       </ion-item>
       <ion-item>
          <ion-label>Option 2</ion-label>
          <ion-radio slot="start" value="2"></ion-radio>
       </ion-item>
     </ion-radio-group>
  </ion-list>
</form>

.ts 文件

import { Component, OnInit } from '@angular/core';
import {Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import * as firebase from 'firebase';



@Component({
  selector: 'app-four',
  templateUrl: './four.page.html',
  styleUrls: ['./four.page.scss'],
})
export class FourPage implements OnInit {

  ngForm: FormGroup;
  radioValue: any;


  constructor(public formBuilder: FormBuilder,
              private fdb: AngularFireDatabaseModule
               ) {
                this.ngForm = new FormGroup({
                  radioSelection: new FormControl('', Validators.required)
                  });
              }

 database = firebase.database();
ref = this.database.ref('ngForm');



ngOnInit() {
  }


  submitForm() {
     this.radioValue = this.ngForm.get('radioSelection').value;
     this.ref.push(this.ngForm);

}
}

如果您也知道如何将此表单提交到 Firestore 数据库，您也可以添加您的答案

【问题讨论】：

您使用的是哪个版本的 ionic？离子1-5？有角？与反应？使用本机 JavaScript？还有一些示例代码会有所帮助
我使用 ionic 4 和 angular
你使用的是哪个底层框架？角？请分享您的代码

标签： firebase ionic-framework firebase-realtime-database

【解决方案1】：

好的，看来您正在使用带有 Angular 的 Ionic 4。使用角度反应形式，您可以这样做

<form [formGroup]="yourForm" (submit)="submit()">
   <ion-list>
     <ion-radio-group formControlName="radioSelection">
       <ion-item>
          <ion-label>Option 1</ion-label>
          <ion-radio slot="start" value="1"></ion-radio>
       </ion-item>
       <ion-item>
          <ion-label>Option 2</ion-label>
          <ion-radio slot="start" value="2"></ion-radio>
       </ion-item>
     </ion-radio-group>
  </ion-list>
</form>

从您的代码中我可以看出，您缺少表单无线电组上的 name 属性。

在你的 .ts 文件中然后有这样的东西

yourForm: FormGroup

constructor() {
   this.yourForm = new FormGroup({
     radioSelection: new FormControl('', Validators.required)
   })
}

submit() {
  const radioValue = this.yourForm.get('radioSelection').value;
  // send it to your database
}

这是使用 Reactive 表单，因此请确保将 ReactiveFormsModule 导入您的 component.module.ts

【讨论】：