angular js：无法验证文本区域

关键词：

【中文标题】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 代码粘贴到您提供的提琴手中。

无法使用 CSS-Approach 或 JQuery-Apprach 向文本区域添加必需的验证

】无法使用CSS-Approach或JQuery-Apprach向文本区域添加必需的验证【英文标题】：UnabletoaddaRequiredValidationtoaText-areausingCSS-ApproachorJQuery-Apprach【发布时间】：2019-03-3109:46:17【问题描述】：我已将以下内容添加到我们的SharePoint在线网站页... 查看详情

角度文本区域验证错误

】角度文本区域验证错误【英文标题】：Angulartextareavalidationerror【发布时间】：2016-12-0300:07:24【问题描述】：我的应用中有一个文本区域，如下所示：<textareatype="text"class="form-control"name="bioBackground"ng-model="obj.background"value="obj.bac... 查看详情

Angular 8过滤器：保留文本区域输入的换行符

】Angular8过滤器：保留文本区域输入的换行符【英文标题】：Angular8filter:preservelinebreaksontextareainput【发布时间】：2020-03-1521:56:17【问题描述】：我尝试使用angular8制作一个过滤器，以在我的文本区域输入中保留文本换行符，文本... 查看详情

Angular 5 - 有条件的文本区域

】Angular5-有条件的文本区域【英文标题】：Angular5-conditionalrequiredtextarea【发布时间】：2018-10-2117:32:02【问题描述】：如果复选框被点击比textarea的出现和需要的[需要]=“otherVendorsChecked==真真：假”强>如果我选择复选框，比取消... 查看详情

文本区域计数字符验证

】文本区域计数字符验证【英文标题】：Textareacountcharactersvalidation【发布时间】：2013-09-0715:13:50【问题描述】：我正在使用vb.net编写一个asp页面，我需要计算我的textarea中的字符数并显示消息：“XcharactersRemaining。”这是我的ASP... 查看详情

Angular中带有关键字标签的文本区域

】Angular中带有关键字标签的文本区域【英文标题】：TextareawithkeywordtagsinAngular【发布时间】：2020-02-2816:45:00【问题描述】：是否有可能有一个textarea允许纯文本，但将某些关键字转换为“芯片”（或其他样式的等效项）？理想情... 查看详情

Angular 2+ - 限制列和行中的文本区域值

】Angular2+-限制列和行中的文本区域值【英文标题】：Angular2+-Limittextareavalueincolumnsandrows【发布时间】：2019-05-1211:31:24【问题描述】：我目前面临以下问题。我有一个textarea，我不仅想用默认属性rows和textarea来限制textarea的大小em>... 查看详情

Angular - 如何在文本区域中设置插入符号位置

】Angular-如何在文本区域中设置插入符号位置【英文标题】：Angular-Howtosetcaretpositionintextarea【发布时间】：2022-01-1422:26:27【问题描述】：我认为这将是一件容易的事，但我意识到我不知道该怎么做。我有一个带有textarea的对话框... 查看详情

以角度实现突出显示的文本区域

...显示的文本区域【英文标题】：Implementinghighlightedtextareainangular【发布时间】：2022-01-0606:28:57【问题描述】：我可以用这个https://mattlewis92.github.io/angular-text-input-highlight/突出显示文本。你能帮我改变文字颜色而不是文字背景颜色吗... 查看详情

文本区域的验证不起作用

】文本区域的验证不起作用【英文标题】：Validationfortextareadoesn\'twork【发布时间】：2015-01-2906:09:05【问题描述】：我开发了一个表单来获取用户输入和文本区域，我想避免用户输入特殊字符。以下是表单的代码和我用于验证的函... 查看详情

如何验证文本区域中的模式匹配？

】如何验证文本区域中的模式匹配？【英文标题】：Howtovalidatepatternmatchingintextarea?【发布时间】：2012-11-1813:37:15【问题描述】：当我在javascript中使用textarea.checkValidity()或textarea.validity.valid且值无效时，两者总是返回true，我做错... 查看详情

在 Chrome 中无法选择文本区域

】在Chrome中无法选择文本区域【英文标题】：TextareanotselectableinChrome【发布时间】：2018-07-1219:20:39【问题描述】：是否可以在谷歌浏览器（我使用的是63.0.3239.132版本）中使文本区域无法选择（仅内部文本无法选择）？在Edge、Explo... 查看详情

如何将光标放在文本区域的开头

...些关于如何将光标放在文本末尾的文本区域的资源，但我无法找到一种简单的方法让它出现在开头。我正在用一些文本预先填充文本区域，只是想让用户更轻松。【问题讨论】：【参考方案1】：将你的文本区域的引用传递给这... 查看详情

无法获取更新的文本区域值

】无法获取更新的文本区域值【英文标题】：UnabletogetUpdatedtextareaValue【发布时间】：2011-12-2514:31:59【问题描述】：我有一个问题：我的页面上有一个如下所示的文本区域：<textareaid=\'redactor_content\'name=\'redactor_content\'style=\'width:... 查看详情

使用 html 表单和 php 验证空白文本区域或是不是存在默认值

】使用html表单和php验证空白文本区域或是不是存在默认值【英文标题】：Usinghtmlformsandphpforvalidationonblanktextareaorifdefaultvalueispresent使用html表单和php验证空白文本区域或是否存在默认值【发布时间】：2011-08-0620:55:04【问题描述】：... 查看详情

IE 11 的自动调整文本区域大小

...工作，但带有滚动条闪烁和文本跳转。所以我需要它用于Angular项目，然后将此代码编译为Web组件。这是我的一些代码：jsbin.com/qivakevaxa/1/edit?html,css,js,输出【问 查看详情

验证未与自定义输入组件一起传播 - Angular 4

】验证未与自定义输入组件一起传播-Angular4【英文标题】：validationnotpropagatedwithcustominputcomponent-Angular4【发布时间】：2018-07-0420:21:33【问题描述】：我有一个自定义文本区域组件，里面有文本区域输入。我创建了一个自定义验证... 查看详情

我无法对齐顶部或中间的文本区域标签

】我无法对齐顶部或中间的文本区域标签【英文标题】：TextarealabelthatIcan\'tgettoaligntopormiddle【发布时间】：2012-12-1708:13:28【问题描述】：查看this，如果您单击顶部的输入之一，则会发生一些jquery。现在您可以看到我的问题，即... 查看详情