如何从mat-input中删除空格

Question

我有一个创建新项目的弹出窗口，我将新项目的条目保存在配置单元中，该配置单元不支持表名中的空格。所以有没有人可以帮我在mat-input中添加验证，以便从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>

Typescript代码：

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;
}

编辑:根据建议，我使用了反应式表单，但我仍然不能弄清楚

Answer 1

就像三角理论所说的那样，你应该清理你的代码，并以适当的方式使用formControls。下面是如何做到这一点的：https://angular.io/guide/reactive-forms

使用formControls时，您可以提供一个模式验证器：

new FormControl('', Validators.pattern(/^\S*$/))

验证器根据禁止使用空格的RegEx检查您的输入。

如果不想使用验证器，也可以在提交表单之前使用someString.replace(/\s/g, "")删除所有空格。

Answer 2

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

 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)
]);

您可以使用formControl.invalid进行验证