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 whole 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是否是valide或是否触及了我无法将当前表单作为参数传递的函数，例如＆＃34; routerCanDeactivate＆＃34;而且我不想用模型驱动的表单太多而不能用代码编写，我喜欢旧的学校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，此时它不存在，但是在ngAfterViewInit中你可以访问它。

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

    }

Angular 2 Template Driven Form访问组件中的ngForm

2 个答案: