删除文本开头的空格答案

【问题标题】：Remove whitespace at the beginning of a text删除文本开头的空格
【发布时间】：2020-12-23 01:22:58
【问题描述】：

我目前正在使用响应式表单；如果输入数据不正确（发送白色空格），基本上用户不应该启用发送信息（启用保存按钮）。从这个意义上说，对于名称，我要求用户的名字不能以空格开头，但在输入字母后允许有空格，我目前对同一字段中的特殊字符和数字有限制。我找到了与 Trim 相关的解决方案，我试图实现它，但字段验证不是“实时”完成的，只是在单击保存按钮后出现“错误”。任何帮助都会对我有很大帮助

这是我的html代码

    form nz-form class="toppart" (ngSubmit)="sendUserData()" [formGroup]="createForm" autocomplete="off">
              <div class="card-body">
                <div class="row my-3">
                  <div class="col col-3">
                    <label> Name <small>*</small></label>
                    <nz-form-item>
                      <nz-form-control nzErrorTip="Please input your name!">
                        <nz-input-group>
                          <!-- (ngModelChange)="nameChange()" -->
                          <input formControlName="name" nz-input placeholder="Enter Name"
                            onkeypress='return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32) )' required />
                        </nz-input-group>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
 </div>
 </div>
 </form>

打字稿中的表格

public createForm = new FormGroup({
    name: new FormControl('', Validators.required),
    email: new FormControl('',Validators.required),
    password: new FormControl('',Validators.required),
    created_by: new FormControl(''),
    role: new FormControl([],Validators.required),
  });

这不应该发生：这些空格应该被删除并且不应该在视觉上出现

【问题讨论】：

标签： html angular forms whitespace

【解决方案1】：

您可以创建自定义验证器

public noWhitespaceValidator(control: FormControl) {
    const isWhitespace = (control.value || '').trim().length === 0;
    const isValid = !isWhitespace;
    return isValid ? null : { 'whitespace': true };
}

并将其传递给表单控件

new FormControl('', [Validators.required, this.noWhitespaceValidator]);

在html中

<span *ngIf="createForm.controls.name.hasError('whitespace')">Name Cannot contain only spaces</span>

如果名称字段仅包含空格，则会显示错误

或者如果你想实时删除空格而不是显示错误，你可以使用 valuechanges

this.createForm.controls.name.valueChanges().subscribe(res = {
    this.createForm.controls.name.setValue((res || '').trim());
})

【讨论】：

【解决方案2】：

您可以将正则表达式模式添加到您的字段中。这将允许在键入时进行验证。

Validators.pattern(^[^-\s][a-zA-Z0-9_\s-]+$)

参考：Form Validators Pattern

【讨论】：

谢谢Saloo，你的回答是正确的，但是它不允许我随时输入空格，所以不符合要求，无论如何谢谢你的赞赏:)