2016-11-09 4 views
0

У меня проблема. В консоли я вижу «Ошибка: ошибки анализа шаблона: (...)». Я использование:angular2 Ошибка валидатора: ошибки анализа шаблона: (...)

"@ угловой/общий": "2.0.0-rc.6",

"@ угловой/компилятором": "2.0.0-rc.6",

"@ угловом/ядра": "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: [] 
     }) 
    } 

я не знаю, где проблема, им это сделал то же самое, что еще ребята, они работают, я не

+0

Посмотрите на http://stackoverflow.com/questions/40445595/debugging-angular2-applications – yurzui

ответ

0

В соответствии с угловой change log из угловых 2.0.0-rc.6 форм API, в @angular/common были удалены, так импортирования FORM_DIRECTIVES, FORM_PROVIDERS, FormBuilder от @angular/common не будет работать.

Теперь угловой 2.1.2 отпущен, поэтому лучше использовать последнюю угловую версию. Вы можете проверить угловые направляющие по обновлению forms и form validation

+0

так, Есть ли возможность сделать проверку в 2.0.0- rc.6 "? –

+0

Я думаю, что вам нужно импортировать из' @ angular/forms' вместо '@ angular/common'. Также название директив также изменяется в rc6, поэтому вам нужно изменить имя и способ, которым вы располагаете использовали директивы формы, такие как 'ngForm',' ngFormModel'. Поэтому лучше проверить журнал изменений перед тем, как внести какие-либо изменения. – ranakrunal9

Смежные вопросы