Angular validation with Required not working

Question

Simplest example ever not working. I generated an Angular 4 application using the Angular CLI v1.0.6, changed the content of app.component.html to:

<form #form='ngForm' (ngSubmit)='submitForm(form.value)'>
  <input type='email'
  class='form-control' placeholder='E-mail' name='userEmail' ngModel required >
  <button type='submit'>Submit</button>
</form>

And the content of app.component.ts to:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  submitForm(data){
    console.log(data);
  }
}

I expected the submit function to not be fired in case I didn't supply an email, but it does. What did I miss?

P.S.: I have looked around for examples (e.g.: https://scotch.io/tutorials/angular-2-form-validation), but after many hours I am unable to find a solution, that's why I come to you. I know it is in my face, but somehow I can't see it.

Answer 1

@Fredrik answer is right.

Angular adds the novalidate attribute to your forms automatically when using the template driven approach. That's why you're not prevented from submitting.

But if you want browser validation then add ngNativeValidate attribute in your form.

  <form ngNativeValidate>
       <input type='text' name='projectName' [(ngModel)]='projectName' required >
       <input type='submit' value='submit' />
 <form>

Answer 2

The above answers are right, you just have to add ngNativeValidate to the form tag. I would like to add that if you want the submit button to not perform the (click) action when the form is not valid, use form.checkValidity()

<form ngNativeValidate #form >
   <input type="text" required/>
   <button name="submit"  type="submit" (click)="form.checkValidity()? login() : null">
          Sign In
   </button>
</form>

Answer 3

Angular adds the novalidate attribute to your forms automatically when using the template driven approach. That's why you're not prevented from submitting.

You can use form.valid to see if the whole form is valid, and then create your own logic around how you want to handle it.

Answer 4

You missed [ngModel] attribute on your input element. Just add [] or [()] to ngModel attribute it will work as expected.

[] is used to give input to angular.
[()] is called as banana in box syntax and enables two way data binding for input elements.

You can do form validations either by HTML5 Validations or angular validations.

If you want HTML5 validations you can use ngNativeValidate as suggested by @RahulMishra

or

you can use angular form validations as suggested by @Fredrik Lundin

Demo

HTML5 Validation
Angular validation