Partielle Formularvalidierung in Angular 2

Question

Im folgenden Beispiel gibt es eine Möglichkeit, nur eine form-step s Eingänge zu validieren?

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

Und FormStepComponent wie so (vereinfacht):

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

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

I Funktion invalid auf dem Formular für-Schritt-Komponente implementieren möchten, das wäre zu überprüfen, ob eine ihrer enthält Eingänge ungültig ist nach ihrer Direktiven wie die f.invalid für das ganze Formular.

Das angegebene Beispiel funktioniert nicht, da die Eingaben an die oberste Form gebunden sind.

Answer 1

So, nachdem einige versuchen, ich ngModelGroup auf jeder 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> 

Einstellung endete Und es 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; 
    } 
} 

Dies ist nur ein "best guess" Ansatz erreichbar. Ich möchte vermeiden, die ngModelGroup Direktive auf allen form-step s zu haben, aber ich weiß nicht, wie man es implizit erzeugt.