如何返回嵌套formGroups中的字段验证错误？

Question

我正在创建一个实用程序函数来捕获所有表单字段验证错误，在表单提交上，使用角4反应形式。

我在这些表单中有多个嵌套的FormGroups实例--例如:两个嵌套的'address‘formGroups (用于家庭和传递)。注:这些只是嵌套在父formGroup内部的一个级别。

目前我只能按照下面的代码使用一个嵌套的formGroup。

如何使它在具有多个嵌套formGroups实例的窗体上工作，而不为下面的for循环创建另一个级别。

我一直沿着递归函数的路线前进(在代码中注释)，但是在递归函数完成并输出空数组之前，“返回”语句会运行.

真的很感谢你对这家伙的帮助。

// 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将递归方法代码返回的结构合并到“主”结构。