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

Question

I'm trying to validate an input of a simple angular 4 form using the HTML5 "required" attribute but the validation does not work. 我正在尝试使用HTML5“required”属性验证简单的角度4表单的输入，但验证不起作用。 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. 我正在使用“Materialise-css”布局进行布局。

Index.html 的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-root: 应用程序根目录：

<app-setor></app-setor>

setor-component: 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 automatically adds a novalidate attribute to forms. Angular4自动向表单添加novalidate属性。

To override this, you can add the ngNativeValidate or ngNoForm directives to the form. 要覆盖它，可以将ngNativeValidate或ngNoForm指令添加到表单。

<form ngNativeValidate>
   ...
</form>

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

问题描述

1 个解决方案

解决方案1
26 已采纳 2017-05-15 16:37:13

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

问题描述

1 个解决方案

解决方案1 26 已采纳 2017-05-15 16:37:13

解决方案1
26 已采纳 2017-05-15 16:37:13