Question

我使用角度材质在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）中托管此网页。现在我想知道当用户点击提交按钮时如何在数据库中保存这两个用户输入（名称和电子邮件）。如果我尝试这样的代码，我还会面临另外一个问题：

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

提交表单时没有进行任何验证，如果表单字段为空，那么它也在提交。

Answer 1

不确定组件代码的外观，您需要在组件类中添加验证。

您可以阅读有关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表单中的数据（使用角度材质）？

1 个答案: