删除文本开头的空格

Question

我目前正在使用响应式表单；基本上，如果输入数据不正确（发送白色 spaces），用户不应启用发送信息（启用保存按钮）。从这个意义上说，对于名称，我要求用户的名字不能以 space 开头，但在输入字母后允许 spaces，我目前对特殊字符和数字有限制同一领域。我找到了与 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),
  });

这不应该发生：那些 space 应该在它们到达时被删除并且不应该出现在视觉上

Answer 1

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

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

参考：Form Validators Pattern

Answer 2

您可以创建自定义验证器

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

删除文本开头的空格

Remove whitespace at the beginning of a text

html

forms

whitespace

angular