Triggering angular form validation from a click handler - angularjs

Question

I have a form that was moved into a table, losing the built in form validation features as I cannot use ng-submit:
<tr ng-form="controller.add.form">
<td>New item</td>
<td><input type="text" name="name" id="newName" class="form-control" placeholder="Name" required ng-model="controller.add.name"></td>
<td><textarea name="description" id="newDescription" class="form-control" placeholder="Description" ng-model="controller.add.description"></textarea></td>
<td><button class="btn btn-xs btn-primary" type="submit" ng-click="controller.add.save()">Save</button></td>
</tr>
This is what my controller looks like:
.controller('ObjectController', ['ObjectService', function(ObjectService)
{
var objects = this;
objects.entries = [];
objects.add = {
name: '',
description: '',
save: function()
{
if(!objects.add.form.$valid) return;
ObjectService.create(
{name: objects.add.name, description: objects.add.description},
function(r)
{
if(r && 'name' in r)
{
objects.add.name = '';
objects.add.description = '';
objects.entries.push(r);
}
}
);
}
};
ObjectService.read({}, function(r) { objects.entries = r; });
}])
How can I make the save method trigger validation with standard popups when clicked?

Answer 1

From AngularJS API Reference:
the purpose of ngForm is to group controls, but not to be a
replacement for the <form> tag with all of its capabilities (e.g.
posting to the server, ...).
ngForm allows creating "form groups" within the main parent form that allow to validate the fields within the group individually. So you should surround the ng-form with a <form> or even lose the ng-form if you don't need validation by groups.

Answer 2

You'll need to pass in the form to your click handler.
Assuming your form has a name of "myForm", change ng-click to:
ng-click="controller.add.save($event, myForm)"
And in your controller:
save : function(event, form) {
if (form.$invalid) {
console.log('invalid');
} else {
console.log('valid');
}
}
Just noticed your comment about not using a form element - as Yaniv said, just surround the table with a form element:
<form name="myForm" novalidate>
<table>
<tr ng-form>
<td>New item</td>
<td>
<input type="text" name="name" id="newName" class="form-control" placeholder="Name" required ng-model="controller.add.name">
</td>
<td>
<textarea name="description" id="newDescription" class="form-control" placeholder="Description" ng-model="controller.add.description"></textarea>
</td>
<td>
<button class="btn btn-xs btn-primary" type="submit" ng-click="controller.add.save($event, myForm)">Save</button>
</td>
</tr>
</table>
</form>
Demo
http://plnkr.co/edit/qKFs3q?p=preview