Angular 2模板驱动表单访问组件中的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 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 是否有效或在我无法将当前表单作为参数传递的函数中被触及，例如“routerCanDeactivate”，我不想过多地使用模型驱动形式来编写代码，我喜欢老派的 ng1 模型绑定(bind)。

我已经更新了示例，但组件中的 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.userFrm);
}

你不能在构造函数中访问frm，它现在不存在，但在ngAfterViewInit中你可以访问它。

从 Angular 8 左右开始，他们更新了 ViewChild 的参数。目前我需要使用这种语法:

@ViewChild('frm', { static: true })userFrm: NgForm;