Question

我需要检查表单中的每个表单控件（input，textarea等）以读取它们所属的元素类型。我有大量的表单，并希望自动为每种类型的表单元素设置不同的（默认）验证器。我不想在某处列出每个可能的formControlName以定义它们的类型，所以我想我可以只检查HTML。

我的想法是让他们全部使用一些查询选择器返回所有存在formControlName的元素，或者我可以遍历应该存在的表单名称，并使用查询选择器获取每个项目测试名称与formControlName属性。

所以如果我的表格看起来像：

<form novalidate [formGroup]="formGroup">

  <div class="row">
    <div class="group-label">Street</div>
    <input type="text" class="form-control" formControlName="street">
    <div class="group-label">City</div>
    <input type="text" class="form-control" formControlName="city">
    <div class="group-label">State</div>
    <input type="text" class="form-control" formControlName="state">
    <div class="group-label">Some Description</div>
    <div class="nested">
        <textarea class="form-control" formControlName="description"></textarea>
    </div>
  </div>

</form>

一个看起来像的FormGroup：

this.formGroup = this.formBuilder.group({
  street: [addr ? addr.street : ''],
  city: [addr ? addr.city : ''],
  state: [addr ? addr.state : ''],
  description: [addr.description ? addr.description : ''],
});

我认为我应该能够循环遍历该组，找到与每个键匹配的表单元素，检查其标记名称，并根据天气设置验证器元素为textarea或{{ 1}}。

这是一个waaay简化示例，因为我在一个单独的类中自动构建formGroups，但它应该得到重点。

在Angular中做这样的事情的正确方法是什么，如果有的话，这样做是否存在安全问题？

Answer 1

尝试一些指令，如

import { Directive, ElementRef, HostListener } from "@angular/core";
import { NgControl } from "@angular/forms";

@Directive({
  selector: '[apply-validtion]'
})
export class ApplyValidation {
  constructor(private el: ElementRef, private control : NgControl) { 
    let type = this.el.nativeElement.tagName;
    switch(type) {
        case 'input': this.control.control.setValidators([]); break;
        case 'textarea': this.control.control.setValidators([]); break;
        default: this.control.control.setValidators([]);
    }
  }
}

Angular 2+获取所有FormControl元素的数组

1 个答案: