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

Question

我想在Angular 2中使用模板驱动的表单,我需要在我的指令中访问当前的ngForm,作为local属性,我不想将它们作为参数传递.

我的表单看起来像这样:

<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或是否触及了我无法将当前表单作为参数传递的函数,例如"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在构造函数中访问它,此时它不存在,但在ngAfterViewInit中您可以访问它.