Html 不允许在窗体中仅使用空格

嘿，我现在正在做一个项目，有一个小问题。我做了一些自定义验证，但我不知道如何将不仅仅是空格验证组合到表单中。 我需要将它与其他验证区分开来，这意味着它有自己的错误消息

这是我目前的代码：

组成部分：

this.movieForm = this.fb.group({
  title: ['', [Validators.required,MyValidators.addMovieTitleValidator(this.dataService),MyValidators.spaceTitleValidator(this.dataService)]]

自定义验证程序：

 static addMovieTitleValidator(dataService: DataService): ValidatorFn {
        return (control: AbstractControl) => {
            if (control.value && dataService.getTitles().includes(control.value.trim())) {
                return {
                    isError: true
                };
            }
            return null;
        }
}

static spaceTitleValidator(dataService: DataService): ValidatorFn {
        return (control: AbstractControl) => {
            if (control.value.trim().length<3) {
                return {
                    isError: true
                };
            }
            return null;
        }
    }

static addMovieTitleValidator（数据服务：数据服务）：验证器fn{
返回（控件：AbstractControl）=>{
if（control.value&&dataService.getTitles（）.includes（control.value.trim（）））{
返回{
伊瑟罗：是的
};
}
返回null；
}
}
静态spaceTitleValidator（数据服务：数据服务）：验证器fn{
返回（控件：AbstractControl）=>{
如果（control.value.trim（）.length将验证器更改为如下内容：

static addMovieTitleValidator(dataService: DataService): ValidatorFn {
    return (control: AbstractControl) => {
        if (control.value && dataService.getTitles().includes(control.value.trim())) {
            return { 'addMovieTitleValidator': true };
        }
        return null;
    }
}

static spaceTitleValidator(dataService: DataService): ValidatorFn {
    return (control: AbstractControl) => {
        if (control.value.trim().length<3) {
            return {'spaceTitleValidator': true};
        }
        return null;
    }
}

<mat-error *ngIf="movieForm.get('title').hasError('required') && movieForm.get('title').touched && !movieForm.controls['title'].valid">
  Title is required
</mat-error>
<mat-error *ngIf="movieForm.get('title').hasError('addMovieTitleValidator') && movieForm.get('title').touched && !movieForm.controls['title'].valid">
  A movie with this title already exists
</mat-error>
<mat-error *ngIf="movieForm.get('title').hasError('spaceTitleValidator') && movieForm.get('title').touched && !movieForm.controls['title'].valid">
  Must provide at least 3 letters
</mat-error>

static addMovieTitleValidator（数据服务：数据服务）：验证器fn{
返回（控件：AbstractControl）=>{
if（control.value&&dataService.getTitles（）.includes（control.value.trim（）））{
返回{'addMovieTitleValidator'：true}；
}
返回null；
}
}
静态spaceTitleValidator（数据服务：数据服务）：验证器fn{
返回（控件：AbstractControl）=>{
如果（control.value.trim（）.lengthHi，提供的答案有帮助吗？如果有，请确保您将其标记为已接受。谢谢。
<mat-error *ngIf="movieForm.get('title').hasError('required') && movieForm.get('title').touched && !movieForm.controls['title'].valid">
  Title is required
</mat-error>
<mat-error *ngIf="movieForm.get('title').hasError('addMovieTitleValidator') && movieForm.get('title').touched && !movieForm.controls['title'].valid">
  A movie with this title already exists
</mat-error>
<mat-error *ngIf="movieForm.get('title').hasError('spaceTitleValidator') && movieForm.get('title').touched && !movieForm.controls['title'].valid">
  Must provide at least 3 letters
</mat-error>