javascript - 每个输入的 Angular 表单验证类

Question

我目前正在开发一个 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、验证、标签和错误等)。 )

Answer 1

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

form validation class for each input

或以编程方式生成表单:

there should be a way, to create this input fields programatically

无论如何，可能有用的东西:https://docs.angularjs.org/api/ngMessages/directive/ngMessages

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