2016-04-12 7 views
0

Ich habe eine Komponente, die ein Template Driven Formular enthält. Was ich wirklich tun möchte, ist einen Code routerCanDeactivate Methode hinzuzufügen, um zu überprüfen, ob das Formular pristine ist und wenn nicht, den Benutzer zu warnen, bevor Sie mit der Navigation fortfahren. Ich weiß, dass Angular ein Template Driven-Formular verwendet und eine ControlGroup erstellt. In der Vorlage kann ich dazu so kommen: <form #hf="ngForm" ...> Gibt es eine Möglichkeit, es von innerhalb einer Komponente zu referenzieren? Wenn dies nicht möglich ist, gibt es eine andere Möglichkeit zu überprüfen, ob das Formular von routeCanDeactivate fehlerhaft ist? Danke für die Hilfe.Wie erhält man eine Referenz zu einer angular aufgebauten ControlGroup aus einer Komponente?

+0

Wo ist die Form? In der Komponente, die den Link zur Route enthält? –

+0

Das Formular befindet sich in der Vorlage der Komponente. –

Antwort

2

das Formular

Sie müssen die Vorbereitung auf jedes Steuerelement hinzuzufügen ngControl

<input ngControl="someName" ...> 

und ngControlGroup jedem Element zwischen den Eingängen und den <form> Element

<div ngControlGroup="groupName"> 

Ihr zu erhalten Formularsteuerelemente, die vonerfasst und verwaltet werdenDirektive.

die Form Referenzierung

Wenn Sie nur in der Vorlage eine Form haben Sie

@ViewChild(NgForm) formA; 

erhalten einen Verweis auf das Formular sonst Template-Variablen auf die Formen

verwenden können, fügen
<form ngForm #formA="ngForm"> 

und erhalten Sie eine Referenz mit

@ViewChild('formA') formA; 

dann können Sie pristine Status wie

überprüfen
routerCanDeactivate() { 
    return this.form.pristine; 
} 

Plunker example