每个输入的角度表单验证类答案

【问题标题】：Angular form validation class for each input每个输入的角度表单验证类
【发布时间】：2016-05-13 09:07:12
【问题描述】：

我目前正在开发一个有很多表单的 Angular 应用程序。自然会涉及到很多表单验证，还有很多 set-error-class、set-success-class 等。

现在，只是在输入字段看起来是这样的：

<div 
  class="form-group"
  ng-class="{
    'has-error':
      form_provider_contact_data.company_name.$invalid && 
      !form_provider_contact_data.company_name.$pristine &&
      form_provider_contact_data.company_name.$touched,
    'has-success':
      form_provider_contact_data.company_name.$valid && 
      !form_provider_contact_data.company_name.$pristine &&
      form_provider_contact_data.company_name.$touched
  }">
  <label class="col-sm-4 control-label" for="company_name">
    {{ 'LABEL_COMPANY_NAME' | translate }}
  </label>
  <div class="col-sm-8">
    <input 
      name="company_name" 
      type="text" 
      class="form-control" 
      id="company_name"  
      placeholder="{{ 'LABEL_COMPANY_NAME' | translate }}"
      ng-model="contact_data.company_name"
      required>
    <p class="help-block">
      Bitte geben Sie einen Firmennamen an.
    </p>
  </div>
</div>

如果有很多表单/输入，它会发展成大量非常相似的代码，这很难维护。应该有一种方法，以编程方式创建这个输入字段，但是现在很紧张，我现在不知道什么是最好的方法。有人能指出我正确的方向吗？

一些澄清：我正在寻找一种在模板（或类似的东西）的帮助下创建输入元素的方法，可能只是通过设置一些参数（例如名称/id、验证、标签和错误等）。 )

【问题讨论】：

有很多为此设计的框架：github.com/json-schema-form/angular-schema-form
我认为 ngMessages 比你的方法更好。这里docs.angularjs.org/api/ngMessages

标签： javascript angularjs forms validation

【解决方案1】：

我不完全确定您是否在询问验证：

每个输入的表单验证类

或以编程方式生成表单：

应该有办法以编程方式创建此输入字段

任何可能有用的东西：https://docs.angularjs.org/api/ngMessages/directive/ngMessages

（它使通过表单验证管理所有错误条件变得更加易于管理，它是自 1.3 以来核心 Angular 的一部分）

【讨论】：

谢谢，这已经是我正在考虑的另一个问题的解决方案；）但主要问题略有不同，我编辑了我的问题以进行澄清。
这个在cmets中已经提到了-schemaform.io-另一个类似的项目-forms-angular.org

【解决方案2】：

看起来您想将 AngularJS 表单验证与 Bootstrap 的表单验证类一起使用。手动执行会创建很多非 DRY 代码。因此，您可以为此验证创建通用指令。

我最近发布了一个凉亭组件http://sagrawal14.github.io/bootstrap-angular-validation/ 来实现同样的效果。看看这个。

【讨论】：