【发布时间】：2017-10-14 12:57:07
【问题描述】：
我正在尝试使用 HTML5“必需”属性验证简单 Angular 4 表单的输入，但验证不起作用。表单在屏幕上正确加载，一切正常，除了表单验证。
我正在为布局使用“Materialize-css”布局。
索引.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">jdandturk@gmail.com</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-setor></app-setor>
setor 组件：
<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. 是分开的，因为问题本身已经解释了。
标签： html angular validation