Required HTML5 input is not working - Angular 4

Question

I'm trying to validate an input of a simple angular 4 form using the HTML5 "required" attribute but the validation does not work. The form is loading correctly on the screen and everything works, except the form validation.

I'm using the "Materialize-css" layout for the layout.

Index.html

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Projeto teste</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <header>
    <!--Navbar-->
    <nav>
      <div class="nav-wrapper">
        <form>
          <div class="input-field">
            <input id="search" type="search" required>
            <label class="label-icon" for="search"><i class="material-icons">search</i></label>
            <i class="material-icons">close</i>
          </div>
        </form>
      </div>
    </nav>

    <!--SideNav-->
    <ul id="slide-out" class="side-nav">
      <li>
        <div class="userView">
          <div class="background">
            <img src="images/office.jpg">
          </div>
          <a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
          <a href="#!name"><span class="white-text name">John Doe</span></a>
          <a href="#!email"><span class="white-text email">[email protected]</span></a>
        </div>
      </li>
      <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
      <li><a href="#!">Second Link</a></li>
      <li>
        <div class="divider"></div>
      </li>
      <li><a class="subheader">Subheader</a></li>
      <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
    </ul>
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons" shortcut="{c: playPause}">menu</i></a
  </header>

  <!--Container-->
  <div class="container">
    <app-root>Carregando...</app-root>
  </div>
</body>
</html>

app-root:

<app-setor></app-setor>

setor-component:

<div class="row">
  <form #f="ngForm" (ngSubmit)="salvarSetor(f)">

    <div class="input-field col s12">
      <input class="validate" required aria-required="true" type="email" id="nome" name="descricao"
       [(ngModel)]="setor.descricao"
    />
      <label for="nome" data-error="Oops" data-success="">Nome/Descrição</label>
    </div>

    <button name="action" type="submit" class="waves-effect waves-light btn right">
              <i class="material-icons right">save</i>
              Salvar
    </button>
  </form>
</div>

@Hamed No. Is separated as the question itself already explains. — Luiz Negrini
– Luiz Negrini, Commented May 15, 2017 at 16:52

Tyler Jennings · Accepted Answer · 2017-05-15 16:37:13Z

30

Angular4 automatically adds a novalidate attribute to forms.

To override this, you can add the ngNativeValidate or ngNoForm directives to the form.

<form ngNativeValidate>
   ...
</form>

answered May 15, 2017 at 16:37

Tyler Jennings

8,9212 gold badges46 silver badges40 bronze badges

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

2 Comments

Luiz Negrini Over a year ago

It worked perfectly, but I was in doubt, I believe that it should have some documentation of good practices to follow, because if by default the native validation is disabled, how should the validations be implemented?

Tyler Jennings Over a year ago

There are different ways to do it depending upon how you build your forms. Here are couple articles that provide some examples: angular.io/docs/ts/latest/cookbook/form-validation.html and scotch.io/tutorials/angular-2-form-validation

Collectives™ on Stack Overflow

Required HTML5 input is not working - Angular 4

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related