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

Question

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

我的想法是要么使用某个查询选择器获取它们，returns 所有具有 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 或input.

这是一个非常简单的示例，因为我在一个单独的 class 中自动构建 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 元素的数组

Angular 2+ get an Array of all FormControl elements

angular

angular-reactive-forms

angular-forms