指示文を使用してフォーム入力をコンポーネントに追加する

Question

フォーム入力を処理する単一のコンポーネントがあります。このコンポーネントは、検証とフォームのテンプレートを処理し、有効な場合にフォームデータを親コンポーネントに渡します。私は同じコンポーネントを共有しています。私は今、フォームの入力がそれほど変わらない点に着目しました。だから私は多分このような状況で指示を使うことができると思った。これは私が考えていたものです。

今のコンポーネントは、このような

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

とされ、その後、テンプレートは6つの入力フィールドを持っています。しかし、これら6つの入力フィールドをディレクティブに変換するにはどうすればよいでしょうか？私は多分

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

かに上記を変えることができるように、このことについてつもりは全く良い方法はありませんか？

Answer 1

Directives are meant to attach behavior to elements in the DOM;したがって、私はそれが仕事のための適切なツールではないと思う。しかし、子コンポーネントを使用することは、あなたの目標に応じてあなたのための解決策かもしれません。さらに、子コンポーネントを使用することは、コンポーネントを実行する方法のような方法であり、物をより読みやすく、理解しやすくします。あなたはデコレータプロパティとして@ContentChildren()を使用することができます

<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> 

この方法では、すべてのSearchFieldを含むQueryList<SearchField>を抽出し、あなたの入力をレンダリングするために各1を反復します。

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> ; 
} 

Working Example on Plunkr