forms - Angular 2 : Idiomatic way to compose forms from multiple components

Question

为了尝试学习 Angular 2，我正在制作一个饮食追踪器，以配合我和我妻子正在尝试的最新时尚饮食。这本书有几个可以用按钮回答的问题(你有多饿——饿了，很饿，等等)加上一个可选的文本输入。还有基于复选框的问题，以及日期。

我正在尝试创建一个由这些多个组件组成的表单——一个用于按钮问题，一个用于复选框问题。看这个plunker .

我很好奇的是将组件(每个组件都有自己的表单元素)组合到 Daily 表单中的惯用方式。每个子组件都有表单元素，还使用 ​​*ngFor 循环访问外部文件 (question-data.ts) 中的数据。目前，每个组件都有一个 Daily 表单订阅的事件发射器。

这是每日表单模板(src/daily.component.ts):

  <form>
  <h1>Daily Tracker</h1>
  <br>
  <legend>Date</legend>
  <date-picker (onDataEntered)="dateDataEntered($event)"></date-picker>
  <br>
  <br>
  <button-questions
    *ngFor="#b of buttonQuestions"
    [btn]="b"
    (onDataEntered)="buttonDataEntered($event)">
  </button-questions>
  <checkbox-questions
    *ngFor="#c of checkboxQuestions"
    [cbox]="c"
    (onDataEntered)="checkboxDataEntered($event)">
  </checkbox-questions>
  <br>
  <input type="submit" value="Submit" class="btn btn-primary">
</form>

然后，例如，buttonQuestions 会像这样呈现 (src/button-questions.component.ts):

<form>
  <h1>Daily Tracker</h1>
  <br>
  <legend>Date</legend>
  <date-picker (onDataEntered)="dateDataEntered($event)"></date-picker>
  <br>
  <br>
  <button-questions
    *ngFor="#b of buttonQuestions"
    [btn]="b"
    (onDataEntered)="buttonDataEntered($event)">
  </button-questions>
  <checkbox-questions
    *ngFor="#c of checkboxQuestions"
    [cbox]="c"
    (onDataEntered)="checkboxDataEntered($event)">
  </checkbox-questions>
  <br>
  <input type="submit" value="Submit" class="btn btn-primary">
</form>

dataEntered() 方法执行此操作(此方法也会在单击任何按钮时调用):

private dataEntered(): void {
  this.btn.inputText = this.inputTextControl.value;
  this.onDataEntered.emit(this.btn);
}

Daily 组件然后订阅其子组件上的事件发射器，并将处理最终验证/数据库接口(interface)(我仍在努力学习这部分)。

但我觉得在子组件上使用原始事件监听器是错误的方法:例如，我不知道如何将子组件上的验证器连接在一起以对整个表单进行验证。我也不认为我正在完全使用内置的 Angular 2 功能。而且我感觉好像不符合我理解的松耦合原则。

我倾向于以某种方式将子组件收集到 Daily 组件中的主 ControlGroup 中，但我不确定该怎么做。

谢谢!

Answer 1

我不知道这种方法是否是首选，但这是一种方法。子组件可以使用 @angular/forms 中的 ControlContainer 来访问其父控件的 FormGroup。

父组件 TypeScript 文件:

// imports go here

@Component({
  selector: "app-parent",
  templateUrl: "./parent.component.html",
  styleUrls: ["./parent.component.css"]
})
export class ParentComponent implements OnInit {
    // Just create a typical FormGroup.
    fg: FormGroup;

    // Instantiate the FormGroup using your preferred method.
    constructor(fb: FormBuilder) {
        this.fg = this.fb.group({ FirstName: "John", LastName: "Doe" });
    }
}

父组件模板文件:

<!-- Bind a form in the parent component to your FormGroup. -->
<form [formGroup]="fg">
    <!-- Reference the child component.  No need for @Inputs or fancy bindings. -->
    <app-child></app-child>
</form>

子组件 TypeScript 文件:

import { Component } from "@angular/core";
import { ControlContainer } from "@angular/forms";

@Component({
  selector: "app-child",
  templateUrl: "./child.component.html",
  styleUrls: ["./child.component.css"]
})
export class ChildComponent {
  // Ask the framework for a ControlContainer whose control property has the goods.
  constructor(public controlContainer: ControlContainer) { }

  ngOnInit(): void {
  }
}

子组件模板文件:

<!-- Finally, bind some top-level element to the imported FormGroup. -->
<fieldset [formGroup]="controlContainer.control">
    <legend>Reusable Controls Go Here</legend>

    <div>
        First Name
        <!-- Now, use the FormGroup per normal. -->
        <input formControlName="FirstName" type="text" />
    </div>
    <div>
        Last Name
        <input formControlName="LastName" type="text" />
    </div>
    <div>
        Accessing the FormGroup
        <!-- You can even get fancy. -->
        {{ controlContainer.control.get('FirstName')?.errors | json }}
    </div>
</fieldset>