使用指令将表单输入添加到组件中

Question

我有一个处理表单输入的组件。该组件负责表单的验证和模板，然后在有效时将表单数据传递给它的父组件。我正在与我的应用程序中的许多其他模块共享这个组件，这些模块分担着相同的责任。不过，我现在已经到了这样的地步:表单的输入将发生如此微小的变化。所以我想在这种情况下我可以使用指令。我就是这么想的。

现在，组件是这样的。

<search-form
    (onSubmit)=submitEvent...
    (onClear)=clearEvent...></search-form>

然后模板有6个输入字段。但是，如何将这6个输入字段转换为指令呢？这样我就可以把上面的

<search-form
    firstName
    lastName
    dateOfBirth
    (onSubmit)=...
    (onClear)=...></search-form>

或者说这件事没有什么好办法？

Answer 1

因此，我认为它不是适合这项工作的工具。然而，根据您的目标，使用子组件可能是您的解决方案。此外，使用子组件是一种更像组件的方式来做事情，并将使事情更加可读性和更容易理解。

<search-form (onSubmit)="submitEvent($event)" (onClear)="clearEvent($event)">
    <search-field name="firstName"></search-field>
    <search-field name="lastName"></search-field>
    <search-field name="dateOfBirth"></search-field>
</search-form>

通过这种方式，您可以使用@ContentChildren()作为装饰器属性来提取包含所有SearchField的QueryList，并对每个SearchField进行迭代以呈现输入。

import { Component, ContentChildren, QueryList, Input } from '@angular/core';

@Component({
  selector: 'search-field',
  template: ``
})
export class SearchFieldComponent {
  @Input('name') name: string;
}

@Component({
  selector: 'search-form',
  template: `
    <div *ngFor="let field of fields">
      <label [for]="field.name">{{ field.name }}</label>
      <input [name]="field.name" [placeholder]="field.name" type="text">
    </div>
  `
})
export class SearchFormComponent {
  @ContentChildren(SearchFieldComponent) fields: QueryList < SearchFieldComponent > ;
}

Plunkr上的工作实例