Accesso al modulo angolare 2 guidato da ngForm nel componente

Question

Desidero utilizzare i moduli basati su modello in Angular 2 e devo accedere all'attuale ngForm nella mia direttiva, come proprietà locale e non voglio passarli come parametro.

mia forma è simile al seguente:

<form #frm="ngForm" (ngSubmit)="save(frm)"> 
    <input [(ngModel)]="user.name" #name="ngForm" type="text"> 
    <a (click)="showFrm()" class="btn btn-default">Show Frm</a> 
</form> 

e nel mio componente

@Component({ 
    selector: 'addUser', 
    templateUrl: `Templates/AddUser`, 
}) 

export class AddUserComponent implements CanDeactivate { 
    public user: User; 
    // how can I use this without defining the hole form 
    // in my component I only want to use ngModel 
    public frm : ngForm | ControlGroup; 

    public showFrm() : void{ 
     //logs undefined on the console 
     console.log(this.frm); 
    } 
} 

questo è possibile, perché ho bisogno di controllare se il valide myFrm ist o è stato toccato in una funzione in cui ho non può passare il modulo corrente come parametro es "routerCanDeactivate" e non voglio usare le modelle basate sul modello troppo per scrivere in codice e adoro il binding del modello ng1 della vecchia scuola.

Ho aggiornato il mio esempio e il frm non è noto nel componente.

Answer 1

È necessario l'attributo ngControl sugli ingressi che si desidera controllare.

<form #frm="ngForm" (ngSubmit)="save(frm)"> 
    <input [(ngModel)]="user.name" #name="ngForm" ngControl="name" type="text"> 
    <a (click)="showFrm()">Show Frm</a> 
</form> 

e nel componente è possibile accedere alla variabile "frm" con

import {Component, ViewChild} from 'angular2/core'; 
... 
@ViewChild('frm') public userFrm: NgForm; 
... 
public showFrm(): void{ 
    console.log(this.frm); 
} 

Non è possibile accedere al frm nel costruttore, non è lì in questo momento, ma nel OnInit voi può accedervi.

Answer 2

<h1>Login</h1> 
    <hr> 
    <div class="col-md-4"> 
     <form autocomplete="off" #loginForm="ngForm" (ngSubmit)="login(loginForm.value)"> 
      <div class="form-group"> 
<em *ngIf="loginForm.controls.userName?.invalid>required</em> 
       <label for="userName">User Name:</label> 
       <input id="userName" (ngModel)="userName" name="userName" type="text" class="form-control" 
         placeholder="User Name..." /> 
      </div> 
      <div class="form-group"> 
<em *ngIf="loginForm.controls.password?.invalid">required</em> 
       <label for="password">Password:</label> 
       <input id="password" (ngModel)="password" name="password" type="password" class="form-control" placeholder="Password..." /> 
      </div> 

      <button type="submit" [disabled="loginForm.invalid"]class="btn btn-primary">Login</button> 
      <button type="button" class="btn btn-default">Cancel</button> 
     </form> 
    </div> 

    ////login component 
    import { Component } from '@angular/core' 

    import {AuthService} from './auth.service' 

    @Component({ 

     selector: 'login', 
     templateUrl: './app/login/login.component.html' 
    }) 

    export class LoginComponent { 

     constructor(private authService : AuthService){} 

     login(formValues) { 
      this.authService.loginUser(formValues.userName, formValues.password) 
     } 

    }