2016-11-23 4 views
1

Я изучаю обещания, и я пытаюсь получить простой пример для работы, но я получаю ошибку. Обещает роль просто проверить, был ли введен определенное имя и производят булево ошибку на обратный вызовAngular 2 Не могу прочитать свойство 'x' of null

Не удается прочитать свойство «shouldBeUnique» нулевых

Вот мой компонент

import {Component, Inject} from '@angular/core'; 
import {FormGroup, Validators, FormBuilder} from '@angular/forms'; 
import {UsernameValidators} from './usernameValidators' 

@Component({ 
    selector: 'signup-form', 
    templateUrl: 'app/signup-form.component.html' 
}) 
export class SignUpFormComponent { 

    form: FormGroup; 

    constructor(@Inject(FormBuilder) fb: FormBuilder) { 
     this.form = fb.group({ 
      username: ['', Validators.compose([ 
       Validators.required, 
       UsernameValidators.cannotContainSpace 
      ]), UsernameValidators.shouldBeUnique], 
      password: ['', Validators.required] 
     }) 
    } 

    get username(): any {return this.form.get('username');} 
    get password(): any {return this.form.get('password');} 

} 

Вот мой component.html

<form [formGroup]="form" (ngSubmit)="signup()"> 
    <div class="form-group"> 
     <label for="username">Username</label> 
     <input 
       id="username" 
       type="text" 
       class="form-control" 
       formControlName="username" placeholder="Username" 
       > 
     <div *ngIf="username.touched && username.errors"> 
      <div *ngIf="username.errors.shouldBeUnique" class="alert alert-danger">This username is already taken</div> 
     </div> 
</form> 

Вот мой валидатор класс, где обещание делается

import {FormControl} from '@angular/forms'; 

export class UsernameValidators { 

    static shouldBeUnique(control: FormControl) { 
     return new Promise((resolve, reject) => { 
      setTimeout(function(){ 
       if (control.value == "mosh") 
        resolve({ shouldBeUnique: true}); 
       else 
        resolve(null); 
      }, 1000) 
     }); 
    } 
} 

Благодарности

+0

Любая причина, почему вы хотите узнать обещания и не наблюдаемые? Наблюдаемые - это метод Angular2, и вы, как мне кажется, тратите время на изучение обещаний в ng2. – garethb

+0

Просматривая онлайн-курс, я по-прежнему думаю, что обещания будут полезны для изучения. – seus

+0

Поскольку наблюдаемые и обещания - это разные понятия, и я никогда не использовал ни единого обещания в любом приложении ng2, которое я построил, я бы не согласился. ng2 построен на наблюдаемых, и мне было сложнее думать в наблюдаемых, потому что я знал обещания. Не попадайтесь в ту же ловушку! Это как jquery против углового, как только вы начинаете изучать углы, вы не можете мыслить как jquery и должны «забыть» jquery, чтобы сделать угловой способ, то же самое с обещаниями и наблюдаемыми. – garethb

ответ

2

Попробуйте использовать safe navigation operator (?.) для защиты от нулевых и неопределенных значений в дорожках собственности.

<div *ngIf="username.touched && username.errors"> 
    <div *ngIf="username.errors?.shouldBeUnique" class="alert alert-danger">This username is already taken</div> 
</div> 

Это должно устранить ошибку, с которой вы работаете. Подробнее в угловом 2 Docs здесь:

https://angular.io/guide/template-syntax#safe-navigation-operator

+0

Большое вам спасибо! – seus

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