Question

我有问题。在控制台中我可以看到＆＃34;错误：模板解析错误：（...）＆＃34;。我用的是：

＆＃34; @ angular / common＆＃34;：＆＃34; 2.0.0-rc.6＆＃34;，

＆＃34; @ angular / compiler＆＃34;：＆＃34; 2.0.0-rc.6＆＃34;，

＆＃34; @ angular / core＆＃34;：＆＃34; 2.0.0-rc.6＆＃34;，

我的表单看起来像

    <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

根据角度change log，角度为2.0.0-rc.6，@angular/common中的API已被删除，因此导入FORM_DIRECTIVES，FORM_PROVIDERS，FormBuilder来自@angular/common将无效。

现在已经发布了角度2.1.2，因此最好使用最新的角度版本。您可以查看角度指南，以更新forms和form validation

angular2 Validator Error：模板解析错误：（...）

1 个答案: