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/compiler": "2.0.0-rc.6",

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

My form looks like

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

My .ts file

    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

回答1:

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.

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

来源：https://stackoverflow.com/questions/40503586/angular2-validator-error-template-parse-errors

标签

javascript

validation

angular

ng-controller