Question

我有几个简单的表单组件，必须在父组件中进行验证。这意味着我需要将formGroups传递给父级，并且可以使用事件或视图子级功能来实现。将formGroup从孩子传递到父母的更好方法是什么？

我被告知我根本不应该将formGroup从子级传递给父级，而是相反地传递给它，为什么呢？

这是我正在尝试的简单演示； https://stackblitz.com/edit/angular-kjnfws

Answer 1

我认为

考虑到您将拥有50多个；您应该使“简单表单组件”尽可能简单和幂等。这将使您的组件简单，易于理解，可重用，并具有单一且定义明确的职责，所有这些都将使测试能力变得更容易。

使它们保持简单的另一个重要原因是；当在不同的父母中使用时，它们将具有不同的验证。几乎有必要使它们与任何逻辑尽可能地隔离。结果；除了拥有FormGroups并将其以某种方式传递给父级（事件发射器或Viewchild）之外，他们根本不应该拥有FormGroup！因为当它们内部定义了FormGroup或FormControl时，您还需要为父组件中的那些设置验证逻辑。相反，您应该在父级和子级表单组件中定义FormGroup和FormControl，它们的FormControls必须作为@Input()。例如；

export class Form1Component {
  @Input() firstNameFC: FormControl;
  @Input() lastNameFC: FormControl;
}

<h2>Form 1: </h2>

<div>
  <label>First Name: </label>
  <input type="text" [formControl]="firstNameFC">

  <label>Last Name:</label>
  <input type="text" [formControl]="lastNameFC">
</div>

您的父级组件应处理FormGroup和FormControl的创建逻辑及其验证逻辑。通过这种方法，您将可以在单个点上很好地控制应用程序逻辑以及测试能力。

export class ParentComponent {
  public parentFG: FormGroup;

  constructor(private fb: FormBuilder) {
    this.parentFG = this.fb.group({
      firstName: ["", Validators.required /** control level validators */],
      lastName: [""],
      school: [""],
      address: [""],
    }, {
      validators: [addressSchoolValidator /** group level validators */]
      });
  }
}

<form1 [firstNameFC]="parentFG.get('firstName')" [lastNameFC]="parentFG.get('lastName')"></form1>

<form2 [schoolFC]="parentFG.get('school')" [addressFC]="parentFG.get('address')"></form2>

这是上述概念的演示>>> https://stackblitz.com/edit/angular-ewel8g

另外；在您的示例中，您还创建了一个单独的提交组件。在该示例的上下文中，我发现它没有必要。提交逻辑也属于父组件。

但是，如果您有一个用例，需要将多个父组件组合在一起并一起提交，那么就很有意义。在这种情况下，需要在以父级组件作为子级的祖父母组件中处理提交逻辑。

这时您将面对您的实际问题； “将formGroup从孩子传递给父母的更好的方法是什么？”

在上面的我的堆栈闪电示例中，我使用ViewChild来收集父组件，由于一些原因，我更喜欢它用于事件发出；

它可以对表格进行细粒度的控制。
最好将所需功能（关于formGroup）定义为父表单中的公共api，并仅将这些api /方法公开给外界，并使formGroup和与验证相关的逻辑与外界完全隔离。
更容易进行测试的模拟：）是的，再次测试...：）
它具有声明性，使代码更易于理解。

然而，所有这些基本上都是基于观点的；在我以前的项目之一中，我面临着几乎相同的情况。我在那段时间进行了广泛的研究，并从头开始重新设计了另一个同事的实现，后来我又一次改变了设计：D，我想出了与我上面解释的几乎相同的解决方案。

我希望这些对您有所帮助...

Answer 2

您可以使用EventEmitter对象

有人告诉我，我根本不应该将formGroup从孩子传递给父母

有点奇怪

父项需要有关子项的信息时事件与ViewChild的关系

2 个答案: