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

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中。

Answer 2

试试这个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>

TS文件： -

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})$') ]) )
}) };

当您开始在字段中输入时，将显示错误消息！