角度js：テキストエリアを検証できません

Question

fellas！

リンクをクリックするとテキスト領域を検証しようとしています。それは、フォームの中には入っていません。ユーザーがリンクをクリックすると、テキスト領域に入力されたコンテンツを投稿する必要があります（データベースに保存する）。

私はそれに対して妥当性を確認しました。残念ながら、それは機能していないし、私は空白の投稿をすることができます。私は空白のポスティングを防止しようとしています。私はフォームとコントローラをフィドルで再作成しました。リンクを提供します。しかしその前に、私のhtmlとjsコードを見てください。

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"; 
     } 
     } 
    } 
    }); 

そして、ここFIDDLEです。

Answer 1

モデル値の代わりにフォーム入力エレメントの名前を使用する必要があります。

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>