角2テンプレート駆動フォームアクセスngForm inコンポーネント

Question

テンプレートドリブンフォームをAngular 2で使用したいのですが、ローカルのプロパティとして現在のngFormにアクセスする必要があり、パラメータとして渡す必要はありません。

私のフォームは次のようになります。私はmyFrmイストのヴァリデをかどうかを確認する必要がありますまたはI機能に感動したので

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

では、可能なこのです現在のフォームをパラメータとして渡すことはできません。 "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> 

およびコンポーネントに、あなたは、コンストラクタでfrmにアクセスすることはできません

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

    }