必要なHTML5入力が機能しない - 角4

HTML5の「必須」属性を使用して単純な角度4のフォームの入力を検証しようとしていますが、検証が機能しません。フォームは画面上に正しく読み込まれており、フォームの検証を除いてすべてが機能します。必要なHTML5入力が機能しない - 角4

私はレイアウトに「Materialize-css」レイアウトを使用しています。

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

出典

2017-05-15 Luiz Negrini

@Hamed No.すでに説明した質問自体が分かれています。 –

Angular4は自動的にフォームへnovalidate属性を追加します。

これを無効にするには、ngNativeValidateまたはngNoFormディレクティブをフォームに追加します。

<form ngNativeValidate> 
    ... 
</form>

出典

2017-05-15 16:37:13

これは完全に機能しましたが、私は疑いがありました。デフォルトでネイティブの検証が無効になっている場合、検証をどのように実装する必要があるのか？ –

フォームの作成方法に応じてさまざまな方法があります。 https://angular.io/docs/ts/latest/cookbook/form-validation.htmlとhttps://scotch.io/tutorials/angular-2-form-validation –

ありがとうございます!!!私はこれを読むでしょう。 –

必要なHTML5入力が機能しない - 角4

答えて

関連する問題