angular2验证器错误:模板解析错误:(…) [英] angular2 Validator Error: Template parse errors:(…)

问题描述

我有问题.在控制台中，我可以看到错误:模板解析错误:(…)".我正在使用:

I have problem. In console i can see "Error: Template parse errors:(…)". I'm use:

"@ angular/common":"2.0.0-rc.6"，

"@angular/common": "2.0.0-rc.6",

"@ angular/compiler":"2.0.0-rc.6"，

"@angular/compiler": "2.0.0-rc.6",

"@ angular/core":"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: []
        })
    }

我不知道问题出在哪里，我和其他人一样，他们在工作，我不知道

i dont know where is problem, im did this the same that another guys, they work, I do not

推荐答案

按角度更改日志，因此从@angular/common导入FORM_DIRECTIVES，FORM_PROVIDERS，FormBuilder不起作用.

As per angular change log from angular 2.0.0-rc.6 forms APIs in @angular/common have been removed so importing FORM_DIRECTIVES, FORM_PROVIDERS, FormBuilder from @angular/common will not work.

现在已发布angular 2.1.2，因此最好使用最新的angular版本.您可以查看角度指南以更新表格和表单验证

Now angular 2.1.2 is released so its better to use latest angular version. you can check angular guides for updating your forms and form validation

这篇关于angular2验证器错误:模板解析错误:(…)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！