Angular 2：如何在RC2的新表单中使用模板引用变量来显示错误消息？

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

在rc 2引入更改之前，我就是这样做的：

电子邮件是必需的
不是有效的电子邮件地址

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

// login.component.ts

从'@angular/core'导入{Component}；
从'@angular/Http'导入{Http，Headers}；
从“@angular/Router deprecated”导入{Router}”；
从'@angular/forms'导入{FormControl，FormGroup，REACTIVE_FORM_指令，validator}；
从“../shared/models/Admin.model”导入{Admin}；
@组成部分({
选择器：“fac登录”，
moduleId:module.id，
指令：[反应型指令]，
提供者：[]，
templateUrl:'./login.component.html'，
样式URL:['./login.component.css']，
})
导出类登录组件{
公共登录信息：FormGroup；
提交=错误；
建造师(
公共管理员：管理员
) {
变量email \-u regex='[a-z0-9\\.\-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\；
this.loginForm=新表单组({
电子邮件：新FormControl（“”，[Validators.required，Validators.pattern（email_regex）]），
密码：新FormControl（“”，[Validators.required]）
});
}
onSubmit（）{
//处理提交
}
}

---

电子邮件
电子邮件是必需的
不是有效的电子邮件地址
密码
密码是必需的
提交

我得到的错误是：

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

异常：错误：未捕获（承诺中）：模板分析错误：
没有将“exportAs”设置为“ngModel”（“type=“text”class=“form control”）的指令
formControlName=“email”[（ngModel）]=“admin.email”[ERROR->]#email=“ngModel”>
我打开了一个，它已被解决，并将包含在RC 3中。
尝试以下HTML代码：-

<form [FormGroup]="adminForm" (ngSubmit)="onSubmit()">
<item>
  <label>EMAIL</label>
    <input type="text" formControlName="email" [(ngModel)]="adminForm.email" class="form-control" id="email">
</item>
  <div *ngIf="adminForm.controls.email.hasErrors && adminForm.controls.email.dirty " class="alert alert-danger">
    Enter Valid Email Address!!!
  </div>
</form>

当您开始在字段中键入时，将显示错误消息！
新表单模块尚未完成。预计并非所有内容都如文档中所述正常工作。它几乎与文档中所述正常工作。因此，我希望我可以摆脱此问题……请尝试添加
name=“email”
（使用和不使用
formControlName=“email”
）@GünterZöchbauer:这两种方式都不会改变任何事情。如果我只添加name=“email”（使用和不使用formControlName=“email”），那么模板引用变量是未定义的。当我使用相同的方法并添加#email=“ngModel”或#email=“formControlName”）时"我得到了与上述相同的错误。@GünterZöchbauer它是在Github上解决的，将在rc 3中解决。请参阅我的答复。您能分享更新后代码的结果吗？@tylerjgarland，正如您在参考问题中看到的，问题不在我的代码中，而是在rc 2中。修复包含在rc 3中。如果您仍然存在此问题e我建议检查问题并将Angular更新为RC 3或更高版本。我正在运行RC4，但仍然遇到相同的问题，因此我希望您能有所了解。感谢您的回复！谢谢，我能够使其正常工作。缺少文档只会减慢过程。：）
<form [FormGroup]="adminForm" (ngSubmit)="onSubmit()">
<item>
  <label>EMAIL</label>
    <input type="text" formControlName="email" [(ngModel)]="adminForm.email" class="form-control" id="email">
</item>
  <div *ngIf="adminForm.controls.email.hasErrors && adminForm.controls.email.dirty " class="alert alert-danger">
    Enter Valid Email Address!!!
  </div>
</form>

export class Admin {
    constructor(
            public formBuilder:FormBuilder) //include this Builders
            {
 this.myForm =  new FormGroup({
     'email' : new FormControl( '', Validators.compose([ Validators.required, Validators.pattern('^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$') ]) )
}) };