angular2验证器错误:模板解析错误:(…)

Question

我有问题。在控制台，我可以看到"错误:模板解析错误:(…)"。I'm use:

" @angular/普通":"2.0.0-rc.6"

" @angular/编译器":"2.0.0-rc.6"

" @angular/核心":"2.0.0-rc.6"

我的表单看起来像

    <form name="authForm" novalidate="" ng-submit="login()" class="md-padding" [ngFormModel]="form">
        <div layout="column" class="layout-column">
            <div class="md-form" style="margin-bottom: 64px; margin-top: 20px">
                <input ngControl="" class="mdl-textfield__input" [(ngModel)]="user.number" name="number" type="tel" (focus)="focus()" (blur)="focusOut()" [textMask]="{mask: mask}" id="number" required ngControl="number" #number="ngForm">
                <label class="mdl-textfield__label" [class.active]="user.number != null" for="number">Numer telefonu</label>
            </div>
            <div *ngIf="!number.valid" class="alert alert-danger">
                <span>Cos nei halo</span>
            </div>
            <div class="md-form" style="margin-bottom: 44px">
                <input class="mdl-textfield__input" [(ngModel)]="user.password" name="password" (focus)="focusPass()" (blur)="focusOutPass()" type="password" id="passInput" required>
                <label class="mdl-textfield__label" [class.active]="user.password != null" for="number">Hasło</label>
            </div>
            <a class="router" routerLink="/panel"><button (click)="logIn($event)" class="md-raised md-accent md-button md-ink-ripple " [class.active]="user.password != null && user.number != null" style="width: 320px" type="submit" aria-label="Zaloguj się"><span>Zaloguj się</span></button></a>
        </div>
    </form>

我的。ts文件

    import {Component, Output, EventEmitter} from '@angular/core';
import {AngularFire, FirebaseObjectObservable} from 'angularfire2';
import {Http, Response} from '@angular/http';
import {UserDataService} from '../index';
import {LoginService} from "../login.service";
import { FormBuilder, ControlGroup, Control, Validators, FORM_PROVIDERS, FORM_DIRECTIVES } from 'angular2/common';

/**
 * This class represents the lazy loaded loginComponent.
 */
@Component({
    selector: 'box-login',
    templateUrl: 'login.component.html',
    styleUrls: ['login.component.css'],
})
export class LoginComponent {
    private user = {number: null, password: null};
    private firebaseSession: FirebaseObjectObservable<any>;
    public mask = ['+', /[1-9]/, /d/, ' ', /d/, /d/, /d/, ' ', /d/, /d/, /d/, ' ', /d/, /d/, /d/]
    @Output() notify: EventEmitter<boolean> = new EventEmitter<boolean>();
    form: ControlGroup;
    constructor(private af: AngularFire,private _LoginService: LoginService, private http: Http, private _userDataService: UserDataService, private formnbuilder: FormBuilder) {
        this.form = formnbuilder.group({
            number: ['', Validators.required],
            password: []
        })
    }

我不知道问题在哪里，我做的和其他人一样，他们工作，我没有

Answer 1

根据angular 2.0.0-rc的angular变化日志。@angular/common中的6个表单api已被删除，因此从@angular/common导入FORM_DIRECTIVES, FORM_PROVIDERS, FormBuilder将无法工作。

现在angular 2.1.2已经发布了，所以最好使用最新的angular版本。你可以查看angular指南来更新表单和表单验证