首页 文章

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

提问于
浏览 次
21

我想在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或是否触及了我无法将当前表单作为参数传递的函数，例如“routerCanDeactivate”，我不想使用模型驱动的表单太多，无法在代码中编写，我喜欢旧的学校ng1模型绑定 .

我更新了我的示例，并且组件中不知道frm .

angular

2 回答

  • 48

    您需要检查输入上的 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中您可以访问它 .

    回复于
  • -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)
        }

    }
    回复于

相关问题