I'm trying to validate an input from a simple form, I'm starting with Angular 4 and in my project, within a component the HTML5 "required" validation stops running. The form is loading correctly on the screen and everything works, except 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>
sector-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>