Angular 2 form validation gibt keine erros

Question

Ich arbeite an meiner Kontaktinformationen und ich muss zu meiner Firebase-Datenbank hinzufügen.

Ich habe gelesen und folgenden Tutorials über die Formularvalidierung und ich denke, ich mache alles richtig, aber es funktioniert nicht in irgendeiner Weise.

Ich bekomme keine Fehler.

Ich brauche Hilfe, bitte.

Das ist was ich habe. Wenn das nicht klar ist, lass es mich wissen.

Grüße,

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> 

Diese meine Komponente ist

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

Für Template-basierte Formularvalidierung, müssen Sie #name="ngModel":

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

Dann können Sie an die Validierung Fahnen binden:

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

Answer 2

, welche Version von Winkel verwenden Sie?

von angular 4.0. Die HTML5-Validierung wurde entfernt. um es wieder zu aktivieren

<form NgNoValidate></form>