angular js：无法验证文本区域

Posted 2023-05-07

【中文标题】angular js：无法验证文本区域

【英文标题】：angular js: Unable to validate a textarea

【发布时间】：2016-10-24 02:26:03

【问题描述】：

伙计们！

我正在尝试在单击链接时验证文本区域。问题是，它没有进入表单。当用户点击一个链接时，在文本区域输入的内容应该被发布（保存到数据库）。

我为此写了一个验证。不幸的是，它不起作用，我可以发表空白帖子。我正在尝试防止发布空白帖子。我在小提琴中重新创建了表单和控制器。链接我会提供下来。不过在此之前，先看看我的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。

【参考方案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>

【讨论】：

试过了...但它仍然没有显示错误消息。 @sawbeanraz

请尝试我添加的代码。你需要一个表单或 ng-form 指令

不..您的代码不起作用。我测试了它。 @sawbeanraz

我已经尝试了您提供的提琴手中的代码并且正在运行。可能是 CSS 有一些问题，所以它没有突出显示。我编辑了显示 $dirty 和 $error 的代码。需要在表格上。请将 HTML 代码粘贴到您提供的提琴手中。