我必须在反应形式中验证输入类型= "text"姓名(员工的全名)，开始时不允许空格

Question

app.component.html

我已经用userData制作了一个包含许多字段的表单，并对其进行了验证

<div class="form-group mb-3">
<label for="fname" class="control-label"><span style="color:red">*</span>Full Name</label>
<input type="text" class="form-control p-2 my-2" placeholder="First name" formControlName="fname">
<span class="text-danger"
*ngIf="userData.controls['fname'] && userData.controls['fname'].touched && userData.controls['fname'].invalid">Please
Input Valid Name</span>
</div>

应用程序组件.ts

但我想要一个验证，如果任何用户在启动时插入空白值或空格，它会给出错误消息，并且是无效的。但在那里，firstName和lastName 之间允许有空格

userData = new FormGroup({
fname: new FormControl('',[Validators.required,Validators.pattern('[a-zA-Z ]+$')]),

})

我已经尝试过这种针对空白的验证，但它在开始时也允许空白。

userData = new FormGroup({
fname: new FormControl('',[Validators.required,Validators.pattern('[a-zA-Z ]+$')]),
})

Answer 1

您可以在这里找到的第一个正则表达式示例。第二个选项：使用.trim()删除空白(更好的用户体验)。

问候，Flo