Question

我正在处理我的联系信息，我需要添加到我的firebase数据库。

我一直在阅读并关注有关表单验证的教程，我认为我正在做的一切正确，但它没有任何作用。

我没有收到任何错误。

我需要帮助。

这就是我所拥有的。如果不是很清楚，请告诉我。

此致

app.module.ts

import { FormsModule } from '@angular/forms';

imports: [
    FormsModule,

contact.component.html

<form >
  <div class="form-group">
     <label for="name">Enter Name</label>
     <input type="text" class="form-control" id="name" required name="name"[(ngModel)]="name">
     <div *ngIf="name.errors && (name.dirty || name.touched) " class="alert alert-danger">
        <div [hidden]="!name.errors.required">
           Name is required
        </div>
     </div>
  </div>
  <button class="btn btn-primary" type="submit" name="submit" >Send</button>
</form>

这是我的组件

import { Component, OnInit, ElementRef } from '@angular/core';
import { Injectable } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import { Observable } from 'rxjs/Observable';
import { Client } from './client';
import { FormsModule } from '@angular/forms'
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css'],
})

export class ContactComponent implements OnInit {

  clients: FirebaseListObservable<any[]>;
  name;

  constructor(af: AngularFire, private elementRef: ElementRef) {
    this.clients = af.database.list('/clients');
  }

  addItem(){
    this.clients.push(this.name);
  }

  ngOnInit() {
  }

}

Answer 1

对于基于模板的表单验证，您需要#name="ngModel"：

<input type="text" class="form-control" id="name"
           required
           [(ngModel)]="model.name" name="name"
           #name="ngModel">

然后你可以绑定到验证标志：

    <div [hidden]="name.valid || name.pristine"
         class="alert alert-danger">
      Name is required
    </div>

Answer 2

您使用的是哪个版本的角色？

从角4.0。 HTML5验证已删除。启用它

<form NgNoValidate></form>

Angular 2表单验证没有给出任何错误

2 个答案: