Как вернуть ошибки проверки поля во вложенных formGroups?

Question

Я создаю служебную функцию для отслеживания всех ошибок проверки полей формы при отправке формы, используя реактивные формы Angular 4.

У меня есть несколько экземпляров вложенных групп FormGroups в этих формах, например: два вложенных«адрес» из группы (для дома и доставки). Примечание: они вложены только в один уровень глубиной внутри родительской группы FormGroup.

В настоящее время я могу заставить это работать только с одной вложенной группой FormGroup согласно приведенному ниже коду.

Как я могу заставить это работать с формами, которые имеют несколько экземпляров вложенных групп formGroup, не создавая еще один уровень для цикла for, приведенного ниже ..

Я прошел путь рекурсивной функции(прокомментировано в коде), но оператор 'return' выполняется до того, как рекурсивная функция завершает работу, и выводит пустой массив ...

Очень ценю вашу помощь с этими парнями.

// utilities.service.ts

const focus: string = UtilitiesService.getAllFormErrors(formGroup)[0];


public static getAllFormErrors(formGroup: FormGroup): string[] {
    let fieldName: string[] = [];

    for (const value in formGroup.controls) {
        const ctrl = formGroup.get(value);
        if (ctrl instanceof FormGroup) {

        // tried calling recursive function here - this.getAllFormErrors(ctrl);

            // loop around new formControls in nested FormGroup
            for (const value in ctrl.controls) {

            const nestedCtrl = ctrl.get(value);
                if (nestedCtrl.errors !== null) {
                    fieldName.push(value);
                }
            }
        } else if (ctrl.errors !== null) {
            fieldName.push(value);
        }
    }
    return fieldName;
}

// expect the 'focus' variable to return the first field throwing a validation error

Answer 1

Я сделал что-то подобное.Вот как выглядит мой общий код валидатора (см. Ниже).

Обратите внимание, что я использовал рекурсию для обработки нескольких групп форм.

  // Processes each control within a FormGroup
  // And returns a set of validation messages to display
  // Structure
  // controlName1: 'Validation Message.',
  // controlName2: 'Validation Message.'
  processMessages(container: FormGroup): { [key: string]: string } {
    const messages = {};
    for (const controlKey in container.controls) {
      if (container.controls.hasOwnProperty(controlKey)) {
        const c = container.controls[controlKey];
        // If it is a FormGroup, process its child controls.
        if (c instanceof FormGroup) {
          const childMessages = this.processMessages(c);
          Object.assign(messages, childMessages);
        } else {
          // Only validate if there are validation messages for the control
          if (this.validationMessages[controlKey]) {
            messages[controlKey] = '';
            if ((c.dirty || c.touched) && c.errors) {
              Object.keys(c.errors).map(messageKey => {
                if (this.validationMessages[controlKey][messageKey]) {
                  messages[controlKey] += this.validationMessages[controlKey][messageKey] + ' ';
                }
              });
            }
          }
        }
      }
    }
    return messages;
  }

Вы можете найти полное приложение здесь: https://github.com/DeborahK/Angular-ReactiveForms/tree/master/APM

Я использовал структуру пары ключ / значение вместо простого массива, чтобы сохранить как имя поля, так и сообщение об ошибке.Затем я использовал Object.assign, чтобы объединить структуру, возвращенную из кода рекурсивного метода, в структуру «master».