Ionic 2/3 Angular 3表单验证消息

Question

我的验证消息无法正确显示，我遇到了一个小麻烦，除了默认的必需验证器之外，我还在使用自定义验证。我正在进行正则表达式验证（仅允许使用字母和空格）和默认的必需验证。

这是我输入字母数字字符时的快照，它显示为无效（红色边框）但我的信息未显示。

这是我将输入留空的快照，在这种情况下，我可以看到错误消息。 （暂时忽略邮件格式化）

这是我的TS代码。

import { Component } from '@angular/core';
import { NavController, NavParams ,Platform,AlertController,ToastController, LoadingController} from 'ionic-angular';
import { NativeStorage } from '@ionic-native/native-storage';
import {FormBuilder, FormGroup, Validators, AbstractControl} from '@angular/forms';
import { CustomValidtorsProvider } from '../../providers/custom-validators/custom-validators';
import { ProfileProvider } from '../../providers/profile/profile';
import { StatelistProvider } from '../../providers/statelist/statelist';
@Component({
  selector: 'personal-details',
  templateUrl: 'personal-details.html',
})
export class PersonalDetailsPage {

  dateFormat : string;
  userPinCode : any;
  constructor(public navCtrl: NavController, public ProfileDetails :ProfileProvider, public navParams: NavParams, private nativeStorage : NativeStorage, private fb : FormBuilder,
  private platform : Platform, public alertCtrl: AlertController,private toastCtrl : ToastController, private loadingScreen : LoadingController     ) 
  {
    platform.ready().then(()=>
    {
        this.GetDetails();
        this.statesList = StatelistProvider.StateList();
        this.selectOptions={
          interface:"action-sheet"
        }

    })


  }
GetDetails()
{
  this.nativeStorage.getItem("fbLogin").then((data)=>{
    // this.userId = data.id;
      this.userImg = data.picture;
      this.userName = data.name;
      this.userEmail = data.email;
    }).catch((c)=>{console.log(c);this.userImg = "http://icons.iconseeker.com/png/fullsize/transformers-x-vol-3/heroic-autobots-1.png"});
    this.nativeStorage.getItem("profileData").then((data)=>{ 
      this.userName =  data.FullName;         
      this.InitForm();
      //this.DateFormat(data.Dob);
      }).catch((c)=>{console.log(c)});
}

InitForm()
{
  this.formPersonal = this.fb.group({
  'username':[this.userName, Validators.compose([Validators.required,CustomValidtorsProvider.TextOnlyValidator])]
  }); 
  this.username = this.formPersonal.controls['username'];     
}


  ionViewDidLoad() {


  }
  onSubmit(value: string) : void{ 


    if(this.formPersonal.valid){

    }
  }

}

我已删除所有其他代码，只是为了保持简单。这是我的验证提供者

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { FormControl } from '@angular/forms';



@Injectable()
export class CustomValidtorsProvider {

  constructor(public http: Http, public fc : FormControl) {

  }

public static TextOnlyValidator(control:FormControl){
  let re = /^[a-zA-Z ]*$/;
  let result = re.test(control.value);
  if(!result){
  return {'invalid' : true}
  }
  return null;
}

}

这是我的HTML，

<form class="spacingafterlogo" *ngIf="userGender" [formGroup]="formPersonal" (ngSubmit)="onSubmit()">
      <ion-item>
        <ion-label>Full Name:</ion-label>
        <ion-input [formControl]="username" name="username" placeholder=""</ion-input>    
      </ion-item>
      <ion-item *ngIf="formPersonal.controls.username.dirty && formPersonal.controls.username.hasError('required')">
        <p  class="danger" padding>Please type only alphabets and it cannot be empty</p>
      </ion-item>
    </form>

请告诉我哪里出错？