angular2 Validator Error: Template parse errors:(…)

Question

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

Take a look at stackoverflow.com/questions/40445595/…

yurzui
– yurzui

2016-11-09 09:30:25 +00:00
Commented Nov 9, 2016 at 9:30 — yurzui
– yurzui, Commented Nov 9, 2016 at 9:30

ranakrunal9 · Accepted Answer · 2016-11-09 09:34:16Z

0

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

answered Nov 9, 2016 at 9:34

ranakrunal9

13.6k3 gold badges44 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mystikal_KK44 Over a year ago

so, Is there any possibility to do validation in 2.0.0-rc.6"?

ranakrunal9 Over a year ago

i think you need to import from @angular/forms instead of @angular/common. Also the name of directives are also changed in rc6 so you need to change the name and the way you have used the form directives like ngForm, ngFormModel. So its better you check the change log first before you make any change .

Collectives™ on Stack Overflow

angular2 Validator Error: Template parse errors:(…)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related