Question

我正在创建一个实用函数，以使用Angular 4反应性表单在表单提交时捕获所有表单域验证错误。

我在这些表单中有多个嵌套FormGroup的实例-例如：两个嵌套的“地址” formGroup（用于住家和送货）。 NB：这些仅嵌套在父formGroup的深一层。

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

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

我一直在使用递归函数（在代码中注释），但是在递归函数完成并输出一个空数组之前，将运行'return'语句...

非常感谢您对这些人的帮助。

list_two

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

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

1 个答案: