Question

我试图使用HTML5＆＃34;要求＆＃34;来验证简单角度4形式的输入。属性但验证不起作用。表单在屏幕上正确加载，一切正常，但表单验证除外。

我正在使用＆＃34; Materialise-css＆＃34;布局布局。

的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">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>

Answer 1

Angular4会自动为表单添加novalidate属性。

要覆盖此内容，您可以将ngNativeValidate或ngNoForm指令添加到表单中。

<form ngNativeValidate>
   ...
</form>

必需的HTML5输入不起作用 - Angular 4

1 个答案: