Question

我目前正在开发一个包含大量表单的角度应用。当然，涉及很多表单验证，还有很多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>

随着大量的表单/输入，它将增长到大量非常相似的代码，这很难维护。应该有一种方法，以编程方式创建这个输入字段，但现在很紧，我现在不应该是最好的方法。有人能指出我正确的方向吗？

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

Answer 1

我不确定您是否在询问验证情况：

每个输入的表单验证类

或以编程方式生成表单：

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

无论哪种方式都可能有用：https://docs.angularjs.org/api/ngMessages/directive/ngMessages

（它使得表单验证管理所有错误条件更易于管理，从1.3开始就是核心Angular的一部分）

Answer 2

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

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

每个输入的角度形式验证类

2 个答案: