Angular personnaliser la验证，不显示消息

我想显示错误消息“用户名不应该有空格”，出现红色条，但没有消息

注册表单.component.html

<form [formGroup]="form">
        <div class="form-group">
            <label for="username">username</label>
            <input formControlName="username"
             class="form-control" 
            id="username"
            type="text">
            <div class="alert alert-danger" *ngIf="username.touched && username.invalid">
                    <div *ngIf="username.errors.required">username is required !</div>
                    <div *ngIf="this.form.controls['username'].errors.minlength">username must have at least {{ username.errors.minlength.requiredLength }} characters</div>
                    <div *ngIf="username.errors.cannotContainSpace">username pas d'espace !</div>
                    {{username.errors | json}}
            </div>
        </div>
        <div class="form-group">
                <label for="password">password</label>
                <input formControlName="password"
                 class="form-control" 
                id="password"
                type="text">
                <div class="alert alert-danger" *ngIf="password.touched && password.invalid">
                <div *ngIf="password.errors.required">password is required !</div>
                </div>
        </div>
          <button class="btn btn-primary">Enregistre</button>
</form>

username.validator.ts

 form = new FormGroup({
    username: new FormControl('',[
      Validators.required,
      Validators.minLength(3),
      UsernameValidator.cannotContainSpace
    ]),
    password: new FormControl('',Validators.required),
  })
  get username(){
    return this.form.get('username');
  }

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

import { AbstractControl, ValidationErrors } from "@angular/forms";

export class UsernameValidator {
   static  cannotContainSpace(control:AbstractControl):ValidationErrors | null {
        if((control.value as string).indexOf(' ')>0)
         return {
            cannotContainSpace:false
         }
        return null;
    }
}

---

在模板中，您检查

cannotContainSpace

是否为真，但始终将其设置为假。

在模板中，您检查

cannotContainSpace

是否为真，但始终将其设置为假。

可能重复的