Angular2異步驗證器沒有掛起

我在跟隨Angular2的在線課程，並且在我一起編程的課程中，我遇到了一個錯誤，但無法弄清楚我出錯的地方。Angular2異步驗證器沒有掛起

我試圖在網上查找類似的問題，但找不到任何有效的解決方案。我最接近的是這個答案，angular2 async form validation，但是這些建議無關緊要，或者它不起作用。

這裏是我的代碼：

組件

export class SignUpFormComponent { 
    form: ControlGroup; 

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

signup(){ 
    console.log(this.form.value); 
} 
}

校驗

export class UsernameValidators{ 
static shouldBeUnique(control: Control){ 
    console.log("taken"); 
    return new Promise((resolve, reject) => { 
     setTimeout(function(){ 
      if(control.value == "example") 
       resolve({ shouldBeUnique: true }); 
      else 
       resolve(null); 
     }, 1000); 
    }); 
} 
static cannotContainSpace(control: Control){ 
    if(control.value.indexOf(" ") >= 0){ 
     return { cannotContainSpace: true }; 
    } 
    return null; 
} 
}

形式的相關部分

<input 
     ngControl="username" 
     id="username" 
     type="text" 
     class="form-control" 
     #username="ngForm"> 

    <div *ngIf="username.control.pending">Checking for uniqueness...</div> 

    <div 
     *ngIf="username.errors.shouldBeUnique" 
     class="alert alert-danger"> 
     Username is already taken. 
    </div>

當我在本地運行服務器並開始鍵入表單時，未顯示掛起消息的div，如果在輸入字段中鍵入「example」，則不會彈出錯誤消息。我錯過了什麼？謝謝。

來源

2017-06-03 Mike Nagler

對於很多事情，可能是錯誤的，我認爲你輸入標籤天然氣的一些錯誤，它應該看起來更像'<輸入 ngControl =「用戶名」 ID =「用戶名」類型=「文本」類=「form-control」>' –

我不相信輸入標籤有任何問題。還有其他的div可以在出現錯誤時正確顯示，例如一個帶'* ngIf =「username.errors.required」'的div，它可以在頁面上正常工作。 –

因爲我不得不從"target" : "es5"所述tsconfig.json文件改變爲"target" : "es6"，我再次運行在終端npm install，然後跑npm start，這解決了這一問題。

來源

2017-06-05 00:35:51

Angular2異步驗證器沒有掛起

回答

相關問題