角型2の部分フォーム検証

Question

次の例では、form-stepの入力を検証する方法はありますか？そのような

<form #f="ngForm"> 
    <form-step> 
    <input name="name" required /> 
    <input name="email" required /> 
    </form-step> 
    <form-step> 
    <input name="phone" required /> 
    <input name="somethingElse" required /> 
    </form-step> 
</form> 

とFormStepComponent（簡体字）：

template: ` 
<form #stepForm="ngForm"> 
    <ng-content></ng-content> 
</form> 
` 

@ViewChild('stepForm') _form; 
public get invalid(): boolean { 
    return this._form.invalid; 
} 

私はそれを含む入力のいずれかが自分に応じて無効であるかどうか確認することを、フォーム・ステップ・コンポーネントに機能invalidを実装したいです指示書はf.invalidのようにフォーム全体に適用されます。

入力が最上位フォームにバインドされているため、提供された例は機能しません。

Answer 1

ので、いくつかは試した後、私は、各form-step

<form #f="ngForm"> 
    <form-step ngModelGroup="mg1"> 
    <input name="name" required /> 
    <input name="email" required /> 
    </form-step> 
    <form-step ngModelGroup="mg2"> 
    <input name="phone" required /> 
    <input name="somethingElse" required /> 
    </form-step> 
</form> 

にngModelGroupを設定し、これは単なる "最良の推測" のアプローチですContentChild

import { ContentChild } from '@angular/core'; 
import { NgModelGroup } from '@angular/forms'; 

@Component({ 
    selector: 'form-step', 
    template: ` 
    <div> 
     <!-- ... --> 
     <ng-content></ng-content> 
    </div> 
    ` 
}) 
export class FormStepComponent {  

    //... 

    @ContentChild(NgModelGroup) _modelGroup; 
    public get invalid(): boolean { 
    return this._modelGroup.invalid; 
    } 
} 

を使用してアクセスすることになりました。私はすべてのform-stepにngModelGroupディレクティブを持つことを避けたいですが、私はそれを暗黙的に作成する方法を知らない。