Angular 2 Доступ к шаблону Доступ к форме ngForm в компоненте

Я хочу использовать формы на основе шаблонов в 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.

Я обновил мой пример, и frm не известен в компоненте.

Ответы

Ответ 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 вы можете получить к нему доступ.

Ответ 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>

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