Góc 2 Mẫu Truy cập Biểu mẫu Truy cập ngForm trong thành phần

Question

Tôi muốn sử dụng biểu mẫu được định hướng mẫu trong Góc 2 và tôi cần truy cập ngForm hiện tại trong chỉ thị của tôi, làm thuộc tính cục bộ và tôi không muốn chuyển chúng thành tham số.

dạng của tôi trông như thế này:

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

và trong thành phần của tôi

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

Đây có phải là có thể, bởi vì tôi cần phải kiểm tra xem Valide myFrm ist hoặc bị xúc động trong một chức năng mà tôi không thể chuyển biểu mẫu hiện tại làm tham số ví dụ "routerCanDeactivate" và tôi không muốn sử dụng các mô hình định hướng theo cách của nó quá nhiều để viết mã và tôi yêu ràng buộc mô hình trường học cũ ng1.

Tôi đã cập nhật Ví dụ của mình và không tìm thấy frm trong thành phần.

Answer 1

Bạn cần thuộc tính ngControl trên các yếu tố đầu vào bạn muốn kiểm tra.

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

và trong thành phần bạn có thể truy cập vào "frm" biến với

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

Bạn không thể truy cập vào frm trong các nhà xây dựng, nó không có tại thời điểm này, nhưng trong OnInit bạn có thể truy cập nó.

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

    }