我正在尝试使用 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>
setter 组件:
<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>
最佳答案
Angular4 自动为表单添加一个 novalidate 属性。
要覆盖它，您可以将 ngNativeValidate 或 ngNoForm 指令添加到表单。
<form ngNativeValidate>
...
</form>
关于html - 所需的 HTML5 输入不起作用 - Angular 4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43984592/