Menu
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>
514
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
