CODEWITHSUNDEEP
htmlangularvalidation
Luiz Negrini
Luiz Negrini

Reputation: 666

Required HTML5 input is not working - Angular 4

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>

Upvotes: 9

Views: 10007

Answers (1)

Tyler Jennings
Tyler Jennings

Reputation: 8911

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>

Upvotes: 30

Related Questions