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>

打字稿代码：

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

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

 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

进行验证

Answer 2

就像trichetriche所说的那样，您应该清理代码并以正确的方式使用formControls。方法如下：https://angular.io/guide/reactive-forms

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

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

验证器将对照正则表达式检查您的输入，该正则表达式禁止空格。

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

如何从mat-input中删除空格

2 个答案: