Angular 2 Template Driven Form access ngForm в компоненте

Question

Я хочу использовать управляемые шаблоном формы в Angular 2, и мне нужно получить доступ к текущему ngForm в моей директиве, как локальное свойство, и я не хочу передавать их в качестве параметра.

моя форма выглядит следующим образом:

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

и в моем компоненте

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

Возможно ли это, потому что мне нужно проверить, если myFrm ист Валиде или была затронута в функции, где я не может передать текущую форму в качестве параметра, например «routerCanDeactivate», и я не хочу использовать форматированные формы, слишком много для написания кода, и мне нравится привязка модели старой школы ng1.

Я обновил свой пример и frm не известен в компоненте.

Answer 1

Вам нужен атрибут ngControl на входах, которые вы хотите проверить.

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

и в компоненте вы можете получить доступ к «КАДР» переменную с

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

Вы не можете получить доступ к frm в конструкторе, это не существует на данный момент, но в OnInit вас может получить к нему доступ.

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

    }