Angular 2 : How to use template reference variables in the new forms from RC2 to display error messages?

Question

我刚刚迁移到 Angular 2 rc 2 的新表单，但在使用模板引用变量检查输入字段是否已被触及时遇到了问题。表单本身和验证器起作用。

这是在 rc 2 引入的更改之前我是这样做的:

<form [ngFormModel]="adminForm" (ngSubmit)="onSubmit()">
  <input [ngFormControl]="adminForm.controls['email']" [(ngModel)]="admin.email"  #email="ngForm"
  type="text" class="form-control" id="admin_email">
  <div *ngIf="adminForm.hasError('required', 'email') && email.touched" class="alert alert-danger">Email is required</div>
  <div *ngIf="adminForm.hasError('pattern', 'email') && email.touched" class="alert alert-danger">Not a valid email address</div>
</form>

我的新组件，适用于全新的 rc 2 表单，如下所示:

// login.component.ts

import { Component } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Router } from '@angular/router-deprecated';
import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES, Validators } from '@angular/forms';

import { Admin } from '../shared/models/admin.model';

@Component ({
  selector: 'fac-login',
  moduleId: module.id,
  directives: [REACTIVE_FORM_DIRECTIVES],
  providers: [],
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})
export class LoginComponent {

  public loginForm: FormGroup;
  submitted = false;

  constructor(
    public admin: Admin
  ) {
    var email_regex = '[a-z0-9\\.\\-\\_]+@[a-z0-9\\.\\-\\_]+\\.[a-z0-9\\.\\-\\_]+';
    this.loginForm = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.pattern(email_regex)]),
      password: new FormControl('', [Validators.required])
    });
  }

  onSubmit() {
    // handle submit
  }

}

---

// login.component.html

<form (ngSubmit)="onSubmit()" [formGroup]="loginForm">
  <div class="form-group">
    <label for="email">Email</label>
    <input type="text" class="form-control"
        formControlName="email" [(ngModel)]="admin.email" #email="ngModel">
    <div *ngIf="loginForm.hasError('required', 'email') && email.touched" class="alert alert-danger">Email is required</div>
    <div *ngIf="loginForm.hasError('pattern', 'email') && email.touched" class="alert alert-danger">Not a valid email address</div>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control"
      formControlName="password" [(ngModel)]="admin.password" #password="ngModel">
    <div *ngIf="loginForm.hasError('required', 'password') && password.touched" class="alert alert-danger">Password is required</div>
  </div>
  <button type="submit" class="btn btn-default" [disabled]="!loginForm.valid">Submit</button>
</form>

我得到的错误是:

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
There is no directive with "exportAs" set to "ngModel" (" type="text" class="form-control"
 formControlName="email" [(ngModel)]="admin.email" [ERROR ->]#email="ngModel">
 <div *ngIf="loginForm.hasError('required', 'email') && email.touched" c"): LoginComponent@12:66
There is no directive with "exportAs" set to "ngModel" ("assword" class="form-control"
 formControlName="password" [(ngModel)]="admin.password" [ERROR ->]#password="ngModel">
 <div *ngIf="loginForm.hasError('required', 'password') && password.t"): LoginComponent@19:70

所以模板引用变量到表单指令的链接不起作用，但我也不知道如何解决这个问题。

This document ，概述了 rc 2 中的新形式，说为了链接到模板引用变量，我们应该使用 ngModel 而不是以前的 ngForm。但这似乎不起作用。

谢谢。

Answer 1

我打开了一个 issue它已解决并将包含在 RC 3 中。