angular js: Unable to validate a textarea - angularjs

Question

fellas!
I'm trying to validate a text area upon clicking a link. Thing is, It's not coming inside a form. And when a user clicks a link, content entered in the text area should be posted (saved to database).
I wrote a validation for that. And unfortunately, it's not working and I'm able to make blank posts. I'm trying to prevent blank post posting. I have recreated the form and the controller in a fiddle. Link I'll provide down. but before that, take a look at my html and js code.
HTML
<div ng-app="myApp" ng-controller="myMap">
<div class="post-textarea" ng-class="{ 'has-error': vm.currentPost.content.$dirty && vm.currentPost.content.$error.required }">
<textarea class="form-control" rows="3" ng-model="vm.currentPost.content" required></textarea>
<a ng-click="vm.addPost(vm.currentPost.content,vm.currentPost.$valid)">Clik to Post and validate</a>
</div>
</div>
JavaScript
angular.module('myApp', [])
.factory('myService', function($http) {
var baseUrl = 'api/';
return {
postCurrentPost: function(newPost) {
var dataPost = {
newPost: newPost
};
return $http({
method: 'post',
url: baseUrl + 'postCurrentPost',
data: dataPost,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
};
})
.controller('myMap', function(myService, $http, $scope) {
var vm = this;
var userObject;
// Add a post
vm.addPost = function(newPost, isValid) {
if (isValid) {
var currentPost = vm.currentPost;
currentPost.content = ""; //clear post textarea
myService.postCurrentPost(newPost).success(function(data) {
vm.posts = data;
});
} else {
alert('Validation not working');
}
};
//Check validation
$scope.getError = function(error, name) {
if (angular.isDefined(error)) {
if (error.required && name == 'vm.currentPost.content') {
return "This field is required";
}
}
}
});
And here's a FIDDLE.

Answer 1

Name of the form input element should be used instead of model value.
https://docs.angularjs.org/api/ng/directive/form
<div ng-app="myApp" ng-controller="myMap">
<form name="formContent">
<div class="post-textarea" ng-class="{ 'has-error': formContent.content.$dirty && formContent.content.$error.required }">
<textarea name='content' class="form-control" rows="3" ng-model="vm.currentPost.content" required></textarea>
<a ng-click="vm.addPost(vm.currentPost.content,vm.currentPost.$valid)">Clik to Post and validate</a>
</div>
</form>
Content is dirty: {{formContent.content.$dirty}}
<br>
Content has required: {{formContent.content.$error.required}}
</div>