required HTML5 is not working with Angular 4 component

Navigation
0

I'm trying to validate an input from a simple form, I'm starting with Angular 4 and in my project, within a component the HTML5 "required" validation stops running. The form is loading correctly on the screen and everything works, except form validation.

I'm using the "Materialize-css" layout for the layout.

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

<app-setor></app-setor>

sector-component: 

<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>
    
asked by anonymous 15.05.2017 / 16:52

1 answer

0

Follow the steps below:

  • Add the novalidate attribute on the form;
  • Pre validate the form before posting with f.form.valid ;
  • Add a variable in the scope to represent ngModel: # name="ngModel" ;
  • Add the check for the variable created on the return label: * ngIf="f.submitted & name.errors? .required"; 

    • <form #f="ngForm" (ngSubmit)="f.form.valid && salvarSetor(f)" novalidade>  
        <div class="input-field col s12">
          <input class="validate" required type="text" id="nome" name="descricao" [(ngModel)]="setor.descricao" #name="ngModel"/>
          <label for="nome" *ngIf="f.submitted && name.errors?.required">O nome é obrigatório.</label>
        </div>    
        <button name="action" type="submit" class="waves-effect waves-light btn right">
                  <i class="material-icons right">save</i>
                  Salvar
        </button>
</form>
        
    18.08.2017 / 05:50
    Return String from onPostExecute () How to get the value of a function inside another