angular 5嵌套表单子组件

Question

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

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

每个可重用的组件都必须这样做

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

从本教程为Angular2,我在了解如何实现目标1,2和4.

本教程中的解决方案还允许实现其他目标,但它通过从父级执行所有操作来实现(请参阅参考资料app.component.ts#initAddress).

我怎样才能实现3,5,6和7,而孩子中声明控件和它们的约束？

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.

现场演示

另外一定要看看Angular Forms - Kara Erickson.该演示文稿向您展示了如何使用模板驱动和反应形式的实现来创建可重用的地址组件.