form validation using angularjs

Question

Im trying to validate my form, if the fields are valid then it should post the data to the DB if not prevent from posting the data to DB. when I submit the form Im getting an error TypeError: Cannot read property '$valid' of undefined, I don't know how to overcome it, need help in this.

html:

<form name="formvalidation">
<ion-view ng-controller="ValidationCheck">
<ion-content>
<div>
<strong>User:</strong> <br/>
<input ng-model="name" type="text" name="name" required/>
<ng-messages for="formvalidation.name.$error" ng-if="formvalidation.name.$invalid">
<div ng-messages-include="error/validation.html"></div>
<ng-messages>
</div>
</from>
<button ng-click="check()">

controller:

myApp.controller('ValidationCheck',function($scope, applicationService)
{
$scope.check=function(formvalidation){
var name={'name'=$scope.name};
$scope.submitted=true;
if(formvalidation.$valid){
applicationService.save(name,$scope.home);
}}});

Answer 1

Just change your if condition formvalidation.$valid to formvalidation . because you already pass formvalidation.$valid in your function via ng-click

if(formvalidation){
...
...
...

}

Answer 2

Remove ng-click and add a ng-submit:

<form name="formvalidation" ng-submit="check()" novalidate>

Answer 3

Try this : ( controller before form )

    <ion-view ng-controller="ValidationCheck">
       <form name="formvalidation">

Answer 4

In your html you have:

<button ng-click="check(formvalidation.$valid)">

which calls the check function with either a true or false value (a boolean), depending on whether or not the form is valid.

In your controller you have the check function with the following if-statement:

if(formvalidation.$valid)

but formvalidation is a boolean (true or false)

I recommend removing the argument from check and simply access the formvalidation properties from the $scope variable.

so the html becomes

<button ng-click="check()">

and the controller becomes

$scope.check=function(){
    var name={'name'=$scope.name};
    $scope.submitted=true;
    if($scope.formvalidation.$valid) {
        applicationService.save(name,$scope.home);
    }
}

Answer 5

<form> should come after controller declaration

<div ng-app="app">
  <ion-view ng-controller="ValidationCheck">
    <form name="formvalidation">
      <ion-content>

var app = angular.module("app", []);
app.controller('ValidationCheck', function($scope) {
  $scope.check = function(formvalidationBoolean) {
    alert(formvalidationBoolean);
    var name = {
      'name': $scope.name
    };
    $scope.submitted = true;
    if (formvalidationBoolean) {
      //applicationService.save(name, $scope.home);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <ion-view ng-controller="ValidationCheck">
    <form name="formvalidation">
      <ion-content>
        <div>
          <strong>User:</strong> 
          <br/>
          <input ng-model="name" type="text" name="name" required/>
          <ng-messages for="formvalidation.name.$error" ng-if="formvalidation.name.$invalid">
            <div ng-messages-include="templates/admin/validation.html"></div>
            <ng-messages>
        </div>
        </from>
        <button ng-click="check(formvalidation.$valid)">Submit</button>
</div>

1. You are sending boolean value "ng-click="check(formvalidation.$valid)", So your statement if(formvalidation.$valid){ inside controller is wrong.
2. And You need to change "=" to ":" in var name = {'name': $scope.name };