Angular Ractive Forms: получить валидаторы из пользовательского компонента

Question

У меня есть пользовательский компонент ввода, просто обложка для обычного HTML-тега input. Вот пример использования:

  <form [formGroup]="formGroup">
    <my-input [title]="Some title" formControlName="name"></my-input>
  </form>

И связанный компонент содержит:

  formGroup: FormGroup = new FormGroup({
    name: new FormControl('', Validators.required),
  });

Мне удалось получить доступ к FormControl экземпляру из my-input компонента, используя этот подход , теперь я хочу добавить звездочку к заголовку my-input, если это необходимо.

Вопрос в том, можно ли получить доступ к списку валидаторов, чтобы я мог различить requiredвалидатор среди них?

PS Конечно, я могу поставить атрибут required на сам элемент

<my-input ... required></my-input>

Но я хочу использовать реактивные формы.

Answer 1

В github уже давно открыта та же проблема (так что, похоже, вам в основном не повезло).

https://github.com/angular/angular/issues/13461

Вы можете увидеть решения, подобные приведенному ниже. (спасибо mtinner из github), но нет ничего официального

  export const hasRequiredField = (abstractControl: AbstractControl): boolean => {
    if (abstractControl.validator) {
        const validator = abstractControl.validator({}as AbstractControl);
        if (validator && validator.required) {
            return true;
        }
    }
    if (abstractControl['controls']) {
        for (const controlName in abstractControl['controls']) {
            if (abstractControl['controls'][controlName]) {
                if (hasRequiredField(abstractControl['controls'][controlName])) {
                    return true;
                }
            }
        }
    }
    return false;
};

Вы увидите, что большинство людей пытаются решить ту же проблему, что и вы.

Надеюсь, это поможет!

Answer 2

Вы можете сделать это

<span "formGroup.controls['name'].errors?.required>*</span>