angular2 Validator Error: Template parse errors:(…)
angular2 Validator Error: Template parse errors:(…)
我有问题。在控制台中我可以看到 "Error: Template parse errors:(…)"。我正在使用:
"@angular/common": "2.0.0-rc.6",
"@angular/compiler": "2.0.0-rc.6",
"@angular/core": "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: []
})
}
我不知道问题出在哪里,我和其他人做的一样,他们工作,我不知道
根据 angular change log 来自 angular 的 2.0.0-rc.6 表单 API @angular/common
已被删除,因此导入 FORM_DIRECTIVES
,FORM_PROVIDERS
、@angular/common
中的 FormBuilder
将不起作用。
现已发布 angular 2.1.2,因此最好使用最新的 angular 版本。您可以查看 angular 更新您的 forms and form validation
的指南
我有问题。在控制台中我可以看到 "Error: Template parse errors:(…)"。我正在使用:
"@angular/common": "2.0.0-rc.6",
"@angular/compiler": "2.0.0-rc.6",
"@angular/core": "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: []
})
}
我不知道问题出在哪里,我和其他人做的一样,他们工作,我不知道
根据 angular change log 来自 angular 的 2.0.0-rc.6 表单 API @angular/common
已被删除,因此导入 FORM_DIRECTIVES
,FORM_PROVIDERS
、@angular/common
中的 FormBuilder
将不起作用。
现已发布 angular 2.1.2,因此最好使用最新的 angular 版本。您可以查看 angular 更新您的 forms and form validation
的指南