Angular FormGroupエラーが表示されない

Question

私のアプリケーションがエラーを表示しないという問題があります。 これは私のhtmlです：

 <ion-item> 
     <ion-label floating style="margin-left: 20px;">Username</ion-label> 
     <ion-input type="text" name="username" formControlName="username" [(ngModel)]="registerCredentials.username" required></ion-input> 
     </ion-item> 
     <ion-item *ngIf="!registerForm.get('username').valid && (registerForm.get('username').dirty)"> 
     <p style="color: white;" *ngIf="registerForm.get('username').hasError('taken')">funktioniert</p> 
     <p style="color: white;" *ngIf="registerForm.get('username').hasError('min')">funktioniert</p> 
     <p style="color: white;" *ngIf="registerForm.get('username').hasError('max')">funktioniert</p> 
     <p style="color: white;" *ngIf="registerForm.get('username').hasError('latein')">funktioniert</p> 
    </ion-item> 

これは私のTSです：

registerForm: FormGroup; 
    this.registerForm = formBuilder.group({ 
      username: ['', Validators.compose([Validators.minLength(3), Validators.maxLength(15), Validators.pattern('^[A-Za-z0-9]+$'), UsernameValidator.checkUsername, Validators.required])], 
      email: ['', Validators.compose([Validators.pattern('^[a-zA-Z0-9.!#$%’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$'), EmailValidator.checkEmail, Validators.required])], 
      password: ['', Validators.compose([Validators.minLength(8), Validators.maxLength(20), Validators.pattern('^[^-\s][a-zA-Z0-9_\s-]+$'),PasswordValidator.checkPassword, Validators.required])] 
     }); 

、これが私のカスタムUsernameValidatorです：

export class UsernameValidator { 
    static checkUsername(control: FormControl): any { 
    var onlyLetters; 

    return new Promise(resolve => { 
     if(control.value.toLowerCase() === "greg"){ 

      resolve({ 
      "taken": true 
      }); 

     } else if (control.value.length < 3){ 
      resolve({ 
      "min": true 
      }); 
     } else if (control.value.length > 8){ 
      resolve({ 
      "max": true 
      }); 
     } else if (!(onlyLetters = /^[a-zA-Z\u00C0-\u00ff]+$/.test(control.value))){ 
      resolve({ 
      "latein": true 
      }); 
     } else { 
      resolve(null); 
     } 
    }); 
    } 
} 

このカスタムValidatorは、エラーキーを返す必要があります。 htmlでは、エラーキーがないかどうかをチェックし、エラーが真でキーが返された場合はメッセージを表示します。しかし、それは動作しないようです。検証自体が機能します。しかし、ErrorMessagesは動作しません。

Answer 1

ユーザ名を確認するためのバリデータは、asyncバリデータです。非同期バリデータは、3番目の引数として渡す必要があります。

そうにあなたのusername formcontrolのあなたの割り当てを変更します。また、Validators.composeが必要とされていません**

username: ['', [sync validators here], [UsernameValidator.checkUsername]] 

。非関連の問題として

---

DEMO

、私は[(ngModel)]をドロップし、フォームコントロールを利用するでしょう。代わりにフォームコントロールに初期値を設定できます。

this.registrationForm.setValue({ 
    username: this.registerCredentials.username 
    // setting other possible values to your form controls 
}) 

をし、完全にngModelを削除します。これは、後に到着した場合、あなたはsetValue()を使用することができます。 2つのバインディング（ngModelおよびFormControl）を使用すると、問題が発生する可能性があります。