Angular 2+ получает массив всех элементов FormControl

Мне нужно проверить каждый из элементов управления формы (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 или input.

Это очень упрощенный пример, потому что я автоматизирую создание formGroups в отдельном классе, но он должен прояснить суть.

Каков правильный способ сделать что-то подобное в Angular, если таковой имеется, и возникают ли проблемы с безопасностью из-за таких действий?


angular angular-reactive-forms angular-forms
person BBaysinger    schedule 21.03.2018    source источник
comment
Можете ли вы добавить пример FormGroup и шаблона? Затем объясните, что вы пытаетесь сделать.   -  person sabithpocker    schedule 22.03.2018
comment
@sabithpocker Я добавил пример.   -  person BBaysinger    schedule 22.03.2018
comment
Я могу придумать директиву настраиваемого атрибута для использования в вашем HTML везде, где должна применяться проверка. <input apply-validation type="text"/>. Вам все равно придется добавлять это в HTML всякий раз, когда элемент нуждается в проверке. Вы также можете расширить это по-разному.   -  person sabithpocker    schedule 22.03.2018
comment
Хм, да. У меня уже есть директива для каждого из моих элементов формы, поэтому я предполагаю, что каждый из них может зарегистрироваться там, где к ним можно получить доступ.   -  person BBaysinger    schedule 22.03.2018
comment
Я должен был подумать об этом. Боже.   -  person BBaysinger    schedule 22.03.2018

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте какую-нибудь директиву вроде

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([]);
    }
  }
}
person sabithpocker    schedule 21.03.2018
comment
Это интересно. Я раньше не видел NgControl. - person BBaysinger; 22.03.2018
comment
@BBaysinger Проверьте этот ответ < / а> - person sabithpocker; 22.03.2018
comment
Наконец, реализуя это. У меня проблема. Я получаю NullInjectorError: No provider for NgControl! - person BBaysinger; 22.03.2018