Angular 2 form validation not giving any erros

Question

I am working on my contact information and I need to add to my firebase database.

I have been reading and following tutorials about the form validation and I think I am doing everything right, but it is not working in any way.

I don't get any errors.

I need help with this, please.

This is what I have. If this is not very clear, please let me know.

Regards,

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>

This is my component

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() {
  }

}

Michael Kang · Accepted Answer · 2017-02-18 03:23:04Z

1

For template-based form validation, you need #name="ngModel":

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

Then you can bind to the validation flags:

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

answered Feb 18, 2017 at 3:23

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Danilo Morales Over a year ago

Thanks. I will do it and get back to you to let you know if it works

Sibiraj · Accepted Answer · 2017-04-09 15:03:07Z

0

which version of angular are you using?

from angular 4.0. HTML5 validation is removed. to enable it back

<form NgNoValidate></form>

answered Apr 9, 2017 at 15:03

Sibiraj

4,7968 gold badges37 silver badges59 bronze badges

Collectives™ on Stack Overflow

Angular 2 form validation not giving any erros

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related