Angular 如何从mat输入中删除空白

我有一个用于创建新项目的弹出窗口。我将新项目的条目保存在配置单元中，该配置单元不支持表名中的空格。 所以，有人能帮我把验证放在mat输入中，以删除inout框中的空白

HTML代码

<form (ngSubmit)="(submit)" #formControl="ngForm">
                    <div class="form">
                        <mat-form-field color="accent">
                            <input
                                matInput
                                #input
                                class="form-control"
                                placeholder="name"
                                [(ngModel)]="data.projectName"
                                name="name"
                                [formControl]="nameControl"
                                required
                                minlength="4"
                                (ngModelChange)="noWhiteSpaceOnChange()"
                            />
                            <mat-error
                                *ngIf="nameControl.hasError('required')"
                                >Please Enter Name</mat-error
                            >
                            <mat-error
                                *ngIf="nameControl.hasError('minlength')"
                                >You must enter atleast 4
                                characters</mat-error
                            >
                        </mat-form-field>
                    </div>

                    <!--Textarea for demo purposes-->
                    <div class="form">
                        <mat-form-field color="accent">
                            <textarea
                                matInput
                                #input
                                class="form-control"
                                placeholder="Description"
                                [(ngModel)]="data.projectDescription"
                                name="projectDescription"
                                required
                            ></textarea>
                            <mat-error *ngIf="formControl.invalid">{{
                                getErrorMessage()
                            }}</mat-error>
                        </mat-form-field>
                    </div>

                    <div mat-dialog-actions>
                        <button
                            mat-button
                            [type]="submit"
                            [disabled]="!formControl.valid"
                            [mat-dialog-close]="data"
                            (click)="confirmAdd()"
                        >
                            Save
                        </button>
                        <button
                            mat-button
                            (click)="onNoClick()"
                            tabindex="-1"
                        >
                            Cancel
                        </button>
                    </div>
                </form>

请输入您的姓名
您必须至少输入4
人物
{{
getErrorMessage（）
}}
拯救
取消

打字脚本代码：

import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { Component, Inject } from '@angular/core';
import { RecommendationService } from '../../../recommendation- 
service.service';
import { FormControl, Validators } from '@angular/forms';
import { Project } from '../../model/project';

@Component({
selector: 'app-add.dialog',
templateUrl: './add.dialog.html',
styleUrls: ['./add.dialog.scss']
})

export class AddDialogComponent {
formControl = new FormControl('', [
Validators.required
// Validators.email,
]);

constructor(public dialogRef: MatDialogRef<AddDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: Project,
public dataService: RecommendationService) { }


getErrorMessage() {
return this.formControl.hasError('required') ? 'Required field' :
  this.formControl.hasError('email') ? 'Not a valid email' :
    '';
}

submit() {
// emppty stuff
}

onNoClick() {
this.dialogRef.close();
}

public confirmAdd() {
this.addProject(this.data);
}
// DEMO ONLY, you can find working methods below
addProject(project: Project) {
return project;
}
}
class SaveData {
id: number;
title: String;
CreatedOn: String;
}

从“@angular/material”导入{MAT_DIALOG_DATA，MatDialogRef}；
从“@angular/core”导入{Component，Inject}；
从'../../../../RecommendationService}导入{RecommendationService}
服务,服务",；
从'@angular/forms'导入{FormControl，Validators}；
从“../../model/Project”导入{Project}；
@组成部分({
选择器：“应用程序添加对话框”，
templateUrl:'./add.dialog.html'，
样式URL:['./add.dialog.scss']
})
导出类AddDialogComponent{
formControl=新的formControl（“”[
需要验证器
//Validators.email，
]);
构造函数（公共dialogRef:MatDialogRef，
@注入（MAT_DIALOG_DATA）公共数据：项目，
公共数据服务：推荐服务{}
getErrorMessage（）{
返回此.formControl.hasError（'required'）？'required field'：
this.formControl.hasError（'email'）？“不是有效的电子邮件”：
'';
}
提交（）{
//临时材料
}
onNoClick（）{
this.dialogRef.close（）；
}
公开确认文件（）{
this.addProject（this.data）；
}
//仅演示，您可以在下面找到工作方法
添加项目（项目：项目）{
返回项目；
}
}
类SaveData{
id：编号；
标题：字符串；
CreatedOn:String；
}

---

编辑：根据建议，我使用了被动表单，但我仍然无法理解

您可以创建自定义验证器，然后在“表单控制”中添加验证器

---

你可以用formControl.invalid进行验证，就像trichetriche说的那样，你应该清理代码并正确使用formControls。以下是如何做到这一点：

使用formControls时，您可以提供模式验证程序：

newformcontrol（“”，Validators.pattern（/^\S*$/）

验证器根据禁止空白的正则表达式检查您的输入

---

当您不想使用验证程序时，您也可以在提交表单之前使用

someString.replace（/\s/g，“”）

删除所有空格。

创建表单控件时，不使用它，而是使用模板驱动变量，然后使用表单控件验证。。。请清理你的代码，你应该自己解决问题。

 whitespacecontrol(control: FormControl): { [s: string]: boolean } {
    if (control.value != null) {
      if (control.value.indexOf(' ') != -1) {

        return { 'whitespace': true };
      }
    }

    return null;
  }


formControl = new FormControl('', [
Validators.required,
this.whitespacecontrol.bind(this)
]);