No puedo ver el mensaje de error al hacer clic en el botón Enviar usando angularjs. Cualquier ventaja será apreciada Gracias de antemano :)

<form id="formbody" ng-submit="submituser(form)" name="form" novalidate>

    <input type="text" ng-class="{ errorinput: submitted && form.dob.$invalid }" name="dob" ng-model="dob" placeholder="Date of Birth" required />
    <span class="e" ng-show="submitted && form.dob.$invalid">Please provide a valid date of birth</span>

    <div style="padding-left: 275px;">
        <button type="submit">Submit</button>
        <!--  <div  type="button" id="btn" style="color: red;" >Submit</div> -->
    </div>
    </div>
</form>

.controller('ExampleController', function($scope, $location, $scope, $stateParams) {
    $scope.singleSelect = '';
    $scope.goToPage = function() {
        console.log("selectservice");
        $location.path("/selectservice");
    }
    $scope.submituser = function($scope) {
        if ($scope.form.$valid) {} else {
            $scope.submitted = true;
        }
    }
})  
0
Shristi S.Chavhan 17 feb. 2017 a las 12:12

4 respuestas

La mejor respuesta

Pruebe algo así

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.dob.$invalid]">
        <label class="control-label" for="dob">Your Date of Birth</label>
        <div class="controls">
            <input type="text" name="dob" ng-model="dob" required />
            <span class="help-inline"  ng-show="submitted && form.dob.$invalid">Please provide a valid date of birth</span>
          
        </div>
    </div>
   
    <button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>
0
MMK 17 feb. 2017 a las 09:38

Debe proporcionar el nombre del formulario, pero incluso después de eso no puede hacer referencia a su formulario en el controlador a menos que lo pase por los argumentos de la función de envío. Tampoco hay una función signupForm() en su controlador.

El camino a seguir es:

<form id="formbody" name="myForm"  ng-submit="signupForm(myForm)" novalidate>
<!-- inputs etc -->
</form>

Luego basado en submituser():

$scope.signupForm = function(myForm) {
        //Do whatever you want to do
        if(myForm.$valid) {
            //some logic
        }else {
            $scope.submitted = true;
        }
    }

Por otro lado, si no desea meterse con el controlador, siempre puede usar el método FormController $submitted. Esto se vería así:

<span class="e" ng-show="myForm.$submitted && myForm.dob.$invalid">Please provide a valid date of birth</span>
0
Korte 17 feb. 2017 a las 09:28

Por favor verifique el nombre del formulario

Has usado dos nombres diferentes

name = "form" en la etiqueta del formulario y se utiliza como signUpForm.dob en el campo de entrada.

Verifique su ng-model para

<form id="formbody"  ng-submit="submituser(form)" name="signUpForm" novalidate>

 <input type="text" ng-class="{ errorinput: submitted && signUpForm.dob.$invalid }" name="dob" ng-model="form.dob" placeholder="Date of Birth" required />
    <span class="e" ng-if="submitted && signUpForm.dob.$invalid">Please provide a valid date of birth</span>

  <div style="padding-left: 275px;">
   <button type="submit">Submit</button>
</div>
</div>
    </form>


.controller('ExampleController',function($scope,$location,$scope, $stateParams){
     $scope.singleSelect='';

     $scope.goToPage=function(){
        console.log("selectservice");
        $location.path("/selectservice");
     }
     $scope.submitted =false;

     $scope.submituser = function(form){
      // console.log(form);
             if (form.$valid) {
           your logic 
    } else {
      $scope.submitted = true;
    }
  }

    })
1
Rajath M S 17 feb. 2017 a las 10:04

Cambie ng-show de span a

 <span class="e" ng-show="submitted && form.dob.$invalid">Please provide a valid date of birth</span>
1
Saurabh Agrawal 17 feb. 2017 a las 09:16