Validieren Sie mit AngularJS

Ich habe ein Formular, das ich mit NG-Klick validieren möchte, ich habe einige Pflichtfelder und einige Felder wie E-Mail.Validieren Sie mit AngularJS

<form role="form" name="cadastroEmpresa" 
     novalidate> 

    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="col-lg-6"> 
       <div class="form-group"> 

        <label>Nome</label> 
        <input class="form-control" 
          placeholder="Nome da empresa" 
          ng-model="empresa.nome"> 
       </div> 

       <div class="form-group"> 
        <label>CNPJ</label> 
        <input 
         id="cnpj" 
         class="form-control" 
         placeholder="Entre com o CNPJ" 
         ng-model="empresa.cnpj"> 
       </div> 

       <div class="form-group"> 
        <label>Endereço</label> 
        <input type="email" 
          name="inputemail" 
          class="form-control" 
          placeholder="Entre com o endereço pela empresa" 
          ng-model="empresa.endereco"> 
       </div> 

       <div class="form-group"> 
        <label>Email</label> 
        <input 
         type="email" 
         class="form-control" 
         placeholder="Email da empresa" 
         ng-model="empresa.email"> 
       </div> 

      </div> 
      <div class="col-lg-6"> 
       <div class="form-group"> 
        <label>Nome do Responsável</label> 
        <input class="form-control" 
          placeholder="Nome do responsável da empresa" 
          ng-model="empresa.nomeResponsavel" required> 
       </div> 

       <div class="form-group"> 
        <label>Telefone</label> 
        <input class="form-control" 
          id="telefone" 
          placeholder="Telefone fixo" 
          ng-model="empresa.telefone" required> 
       </div> 

       <div class="form-group"> 
        <label>Celular</label> 
        <input class="form-control" 
          id="celular" 
          ng-model="empresa.celular" 
          placeholder="Telefone celular"> 
       </div> 

       <div class="form-group"> 
        <label>Data de Vencimento</label> 
        <input class="form-control" 
          ng-model="empresa.dataVencimentoMensalidade" 
          placeholder="Data de Vencimento da Mensalidade"> 
       </div> 
      </div> 
     </div> 
    </div> 
</form>

Ich mag überprüfen, wenn der Benutzer auf die Schaltfläche klickt, und Markierung in Rot das Feld, das erros hat, aber ich bin ziemlich neu mit Winkel so dass ich nicht sicher, wie ich das tue, wenn jemand könnte mir geben Beispiel Ich werde meine Bewerbung abschließen können. Danke euch allen.

Quelle

2016-07-04 William Cézar

Sie sind bereits die 'required' Eigenschaft in einigen mit Felder. Warum nicht auch im E-Mail-Bereich? – JJJ

Das Problem ist das Absenden, auch wenn es erforderlich ist. Ich möchte $ isValid verwenden, weiß aber nicht genau wie. –

Wie in Gonzalo's answer erwähnt, "sollten Sie den Eingaben, die Sie validieren möchten, einen Attributnamen hinzufügen".

Danach können Sie ngMessages verwenden, um Ihre Eingaben zu validieren.

Hier ist ein Ausschnitt Arbeits:

var app = angular.module('app', ['ngMessages']); 
 

 
app.controller('mainCtrl', function ($scope) { 
 
    // Any JS code. 
 
});

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" ></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>  
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>  
 
    <script src="https://code.angularjs.org/1.4.9/angular-messages.js"></script>   
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <form role="form" name="form" novalidate> 
 
    <div class="form-group" ng-class="{ 'has-error' : form.nome.$touched && form.nome.$invalid }"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
      <div class="col-lg-6"> 
 
       <div class="form-group"> 
 
       <label>Nome</label> 
 
       <input name="nome" class="form-control" placeholder="Nome da empresa" ng-model="empresa.nome" required="" /> 
 
       </div> 
 
       <div class="help-block" ng-messages="form.nome.$error" ng-if="form.nome.$touched"> 
 
       <!-- <div ng-messages-include="error-messages.html"></div> --> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="form-group" ng-class="{ 'has-error' : form.cnpj.$touched && form.cnpj.$invalid }"> 
 
     <label>CNPJ</label> 
 
     <input id="cnpj" name="cnpj" class="form-control" placeholder="Entre com o CNPJ" ng-model="empresa.cnpj" required="" /> 
 
     <div class="help-block" ng-messages="form.cnpj.$error" ng-if="form.cnpj.$touched"> 
 
      <!-- <div ng-messages-include="error-messages.html"></div> --> 
 
     </div> 
 
     </div> 
 
     <div class="form-group" ng-class="{ 'has-error' : form.end.$touched && form.end.$invalid }"> 
 
     <label>Endereço</label> 
 
     <input name="end" class="form-control" placeholder="Entre com o endereço pela empresa" ng-model="empresa.endereco" required="" /> 
 
     <div class="help-block" ng-messages="form.end.$error" ng-if="form.end.$touched"> 
 
      <!-- <div ng-messages-include="error-messages.html"></div> --> 
 
     </div> 
 
     </div> 
 
     <div class="form-group" ng-class="{ 'has-error' : form.email.$touched && form.email.$invalid }"> 
 
     <label>Email</label> 
 
     <input type="email" name="email" class="form-control" placeholder="Email da empresa" ng-model="empresa.email" /> 
 
     <div class="help-block" ng-messages="form.email.$error" ng-if="form.email.$touched"> 
 
      <!-- <div ng-messages-include="error-messages.html"></div> --> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-6" ng-class="{ 'has-error' : form.resp.$touched && form.resp.$invalid }"> 
 
     <div class="form-group"> 
 
      <label>Nome do Responsável</label> 
 
      <input name="resp" class="form-control" placeholder="Nome do responsável da empresa" ng-model="empresa.nomeResponsavel" required="" /> 
 
      <div class="help-block" ng-messages="form.resp.$error" ng-if="form.resp.$touched"> 
 
      <!-- <div ng-messages-include="error-messages.html"></div> --> 
 
      </div> 
 
     </div> 
 
     <div class="form-group" ng-class="{ 'has-error' : form.fixo.$touched && form.fixo.$invalid }"> 
 
      <label>Telefone</label> 
 
      <input name="fixo" class="form-control" id="telefone" placeholder="Telefone fixo" ng-model="empresa.telefone" required="" /> 
 
      <div class="help-block" ng-messages="form.fixo.$error" ng-if="form.fixo.$touched"> 
 
      <!-- <div ng-messages-include="error-messages.html"></div> --> 
 
      </div> 
 
     </div> 
 
     <div class="form-group" ng-class="{ 'has-error' : form.celular.$touched && form.celular.$invalid }"> 
 
      <label>Celular</label> 
 
      <input name="celular" class="form-control" id="celular" ng-model="empresa.celular" placeholder="Telefone celular" /> 
 
      <div class="help-block" ng-messages="form.celular.$error" ng-if="form.celular.$touched"> 
 
      <!-- <div ng-messages-include="error-messages.html"></div> --> 
 
      </div> 
 
     </div> 
 
     <div class="form-group" ng-class="{ 'has-error' : form.data.$touched && form.data.$invalid }"> 
 
      <label>Data de Vencimento</label> 
 
      <input name="data" class="form-control" ng-model="empresa.dataVencimentoMensalidade" placeholder="Data de Vencimento da Mensalidade" /> 
 
      <div class="help-block" ng-messages="form.data.$error" ng-if="form.data.$touched"> 
 
      <!-- <div ng-messages-include="error-messages.html"></div> --> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input type="submit" name="commit" value="Criar empresa" class="btn btn-primary" ng-disabled="form.$invalid"> 
 
      <a class="btn btn-default" href="#">Cancelar</a> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body> 
 

 
</html>

Ich würde Ihnen empfehlen dieses tutorial auch zu überprüfen.

PS: Wie Sie vielleicht bemerkt haben, kommentierte ich alle "ng-include" (die die Datei enthält, die alle Meldungen enthält, wenn Eingabe ungültig ist), die ich selbst nicht kenne wenn es möglich ist, eine neue "Datei" hier im Snippet hinzuzufügen, aber ich poste hier fast den kompletten Code und du kannst das komplette here überprüfen.

fehler messages.html:

<p ng-message="required">This field is required</p> 
<p ng-message="minlength">This field is too short</p> 
<p ng-message="maxlength">This field is too long</p> 
<p ng-message="required">This field is required</p> 
<p ng-message="email">This needs to be a valid email</p>

Ich hoffe, es hilft !!

Quelle

2016-07-04 14:44:27 developer033

Zuerst sollten Sie das Attribut name zu den Eingängen hinzufügen, die Sie validieren möchten. Dann In der Steuerung, genauer gesagt in der $scope Objekt, haben Sie einen Schlüssel mit dem Namen Ihres Formulars, und innerhalb dieser, Schlüssel für jeden Eingang, den Sie eine name attrubute hinzugefügt.

Beispiel in Ihrem HTML-basiert:

angular 
    .module('exampleApp') 
    .controller('ExampleController', Controller); 
    Controller.$inject = ['$scope']; 
    function Controller($scope){ 
     var vm = this; 
     var theForm = $scope.cadastroEmpresa; 
     console.log(theForm); 


     vm.handleValidation = function(){ 
      var theForm = $scope.cadastroEmpresa; 
      console.log($scope); 
      console.log($scope.cadastroEmpresa); 
     } 
    }

http://codepen.io/gpincheiraa/pen/GqEmNP

Quelle

2016-07-04 13:52:52

Formularvalidierung Arbeiten funktioniert automatisch, wenn, wenn Sie das Formular aus. So sollten Sie eine submit Typ Taste irgendwo innerhalb der hinzufügen form wie:

<button type="submit" class="btn btn-primary">Submit data</button>

Und wenn Sie benötigen jetzt die richtige Nachricht Validierung und wenn Sie Bootstrap-Bibliothek verwenden, können Sie diese library auschecken, um Validierungsmeldungen in Angular bieten mit Bootstrap.

Quelle

2016-07-04 13:53:00

Sie müssen nur ein CSS dafür erstellen, angular fügt bereits die erforderlichen Klassen für die Validierung hinzu.

dieser Klasse hinzugefügt wird automatisch erforderlichen Felder aus, müssen Sie nur es Ihre Art geben, zum Beispiel:

.ng-submitted .ng-invalid { 
color: #f00; 
border: 1px solid #f00; 
}

Codepen: http://codepen.io/giannidk/pen/Bzkkaj?editors=1001

Quelle

2016-07-04 15:21:36 gianni

Validieren Sie mit AngularJS

Antwort

Verwandte Themen