angular - 如何允许嵌套组件被其父级跟踪并从 Angular 中的父级获取值？

Question

我有一系列表单(每个表单由一个组件管理)。

这些表单中有一种输入模式(例如，其中许多需要允许输入地址)，我必须重构为可重用的组件，因为它们以多种形式使用，我不想重复既不是他们的逻辑也不是他们的模板。

每个可重用的组件都必须

1. 有逻辑
2. 的模板包含输入标签并且没有 <form>标签
3. 有其客户端验证约束
4. 可能从其父级接收初始值
5. 能够将其字段的值作为对象返回给父级(例如 address: {street: "...", "city": "...", ...} )
6. 如果不满足验证约束，则使父表单无效
7. 一旦用户更改了父表单的值，就让父表单“被触及”

来自 this tutorial对于 Angular2，我了解如何实现目标 1、2 和 4。

本教程中的解决方案还可以实现其他目标，但它是通过从父级执行所有操作(参见 app.component.ts#initAddress)来实现的。

如何在声明控件和他们对 child 的约束？

Answer 1

如果你想在子组件中提供所有内容，你可以尝试这样的事情。

import { Component, Input } from '@angular/core';
import { FormGroupDirective, ControlContainer, Validators, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'address',
  template: `
    <div formGroupName="address">
      <input formControlName="city" placeholder="city" (blur)="onTouched" />
      <input formControlName="country" placeholder="country" (blur)="onTouched" />
      <input formControlName="zipCode" placeholder="zipCode" (blur)="onTouched" />
    </div>
  `,
  styles: [`h1 { font-family: Lato; }`],
  viewProviders: [
    { provide: ControlContainer, useExisting: FormGroupDirective }
  ]
})
export class AddressComponent {
  private form: FormGroup;

  constructor(private parent: FormGroupDirective) { }

  ngOnInit() {
    this.form = this.parent.form;

    const city = new FormControl('', Validators.required);
    const country = new FormControl('', Validators.required);
    const zipCode = new FormControl('', Validators.required);

    const address = new FormGroup({ city, country, zipCode });

    this.form.addControl('address', address);
  }
}

用法:

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
  <form [formGroup]="form">
    <address></address>
  </form>

  {{ form.value | json }}
  `,
  styleUrls: ['./app.component.css'],

})
export class AppComponent {
  form: FormGroup;

  constructor() {
    this.form = new FormGroup({});
  }
}

请注意，我正在使用 ReactiveFormsModule。

Live demo

另请务必查看 Angular Forms - Kara Erickson .该演示文稿向您展示了如何创建可重用的地址组件，同时实现了模板驱动和响应式(Reactive)表单。