如何在 Firebase 托管中保存来自 Angular 2 表单（使用 angular material）的数据？

Question

我使用 angular material 在 Angular 2 中创建了一个表单。以下是工作代码：

<form>
    <md-input-container>
        <md-placeholder>
            <md-icon>face</md-icon> Name
        </md-placeholder>
        <input mdInput name="name" [(ngModel)]="name"  required>
        <md-error>This field is required</md-error>
    </md-input-container>

    <md-input-container>
        <md-placeholder>
            <md-icon>email</md-icon> Email
        </md-placeholder>
        <input mdInput name="email" [(ngModel)]="email"  required>
        <md-error>This field is required</md-error>
    </md-input-container>

    <button md-raised-button color="primary" type="submit">SUBMIT</button>
</form>

我将在 Firebase 托管 (https://firebase.google.com) 中托管此网页。现在我想知道当用户单击提交按钮时如何将这两个用户输入（姓名和电子邮件）保存在数据库中。如果我尝试这样的代码，我还会遇到 1 个问题：

<form action="some_url" method="post" #form>
  ....
  ....
<button md-raised-button color="primary" type="submit" (click)="form.submit()">SUBMIT</button>
</form>

它正在提交表单而不进行任何验证，例如如果表单字段为空则它也在提交。

Answer 1

不确定您的组件代码是什么样的，您需要在组件中添加验证 class。

您可以阅读有关 Form validations in angular here. 的更多信息。

获得有效数据后，您可以轻松使用 angularfire2 保存数据。

import { AngularFire } from 'angularfire2';

...
constructor(private af: AngularFire) {}

submit(){
   someOBj = {name: <value>,email: <value>}

   // If list
   this.af.database.list(<url>).push(someOBj);
   // If object
   this.af.database.object(<url>).set(someOBj);
}
...

希望对您有所帮助！！

如何在 Firebase 托管中保存来自 Angular 2 表单（使用 angular material）的数据？

How to save data from an Angular 2 form (using angular material) in Firebase Hosting?

firebase

firebase-hosting

firebase-realtime-database

angular-material2

angular