Подключите форму радиокнопки ioni c к базе данных реального времени Firebase - PullRequest
Новая
       19

Подключите форму радиокнопки ioni c к базе данных реального времени Firebase

0 голосов
/ 14 марта 2020

Я создал приложение ioni c, которое содержит форму переключателя. У меня проблема с подключением формы переключателя к базе данных Firebase в реальном времени. База данных должна иметь возможность хранить значения радиосвязи, выбранные пользователем после отправки. Я уже добавил firebase в свое приложение ioni c.

Это мой код 

<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);

}
}

Если у вас также есть представление о том, как отправить эту форму в базу данных пожарного магазина, вы также можете добавить ваш ответ

1 Ответ

0 голосов
/ 14 марта 2020

Хорошо, похоже, вы используете Ioni c 4 с Angular. С angular реагирующими формами вы можете сделать это следующим образом 

<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>

Что я могу сказать из вашего фрагмента кода, так это то, что вам не хватает свойства имени в радиогруппе для формы.

В вашем файле .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
}

Это использует реактивные формы, поэтому обязательно импортируйте ReactiveFormsModule в ваш component.module.ts

...