驗證與AngularJS

我有一個表單，我想驗證與ng點擊，我有一些必填字段e像電子郵件一些領域。驗證與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>

我想，當用戶點擊該按鈕，並標記爲紅色有誤差修改字段來驗證，但我敢用新的角度，所以我不知道我該怎麼辦，如果有一個人能夠給我例如，我將能夠完成我的申請。謝謝大家。

來源

2016-07-04 William Cézar

領域。爲什麼不在電子郵件領域呢？ – JJJ

問題在於即使在需要時也提交。我想使用$ isValid，但不知道具體如何。 –

如Gonzalo's answer所述，「您應該爲要驗證的輸入添加屬性名稱」。可以使用ngMessages驗證您的輸入。

這裏有一個片斷工作：

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>

我會建議你檢查這個tutorial也。你可能已經注意到了，我把所有「ng-include」（其中包含包含輸入無效時顯示的所有消息的文件）都註釋掉了，因爲我甚至不知道如果可以在代碼段中添加一個新的「文件」，但我在這裏發佈幾乎完整的代碼，您可以檢查完整的here。

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

我希望它能幫助！

來源

2016-07-04 14:44:27 developer033

首先，您應該將屬性name添加到您要驗證的輸入。然後在控制器中，更具體地在$scope對象中，您可以使用一個帶有表單名稱的密鑰，並在其中添加與您添加屬性的每個輸入相關的密鑰。

例如基於在HTML：

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

來源

2016-07-04 13:52:52

表單驗證時自動當您提交表單的工作。所以，你應該在任何地方里面添加一個submit型按鈕form這樣的：

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

，如果您現在需要適當的確認消息，如果您使用的是引導庫，你可以看看這個library提供的角度驗證消息與引導。

來源

2016-07-04 13:53:00

你只需要爲此創建一個CSS，angular已經添加了驗證所需的類。

這個類會自動添加到所需的字段，你只需要儘自己的風格，比如：

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

Codepen：您已經在使用中的一些`required`財產http://codepen.io/giannidk/pen/Bzkkaj?editors=1001

來源

2016-07-04 15:21:36 gianni

驗證與AngularJS

回答

相關問題