响应式表单中字符串输入字段的验证

Question

这是我的表单，它只在点击提交按钮时显示错误

我希望在输入字段中输入时显示此错误。

响应式表单中字符串输入字段的验证，当输入数字时，错误应该立即显示，就像(只输入数字)，当数字被删除时，错误不应该显示。请问，有什么想法吗?

Answer 1

下次您可以添加您的代码。您必须创建一个文本来显示字段中的错误，或者在输入

上添加红色边框之类的内容。

<div [formGroup]="form">
<label for="title" class="text-muted text-sm">Title</label>
<span
class="text-danger"
*ngIf="form.get('title').errors &&
form.get('title').hasError('required')">min 2 length</span>
<input id="title" type="text" placeholder="" formControlName="title">
</div>

在typescript中(不要忘记导入formGroup和formBuilder)

form: FormGroup = new FormGroup({});
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
title: ['', [Validators.required, Validators.minLength(2)]]
});
}

在css

.text-danger{
color: red
}

你也可以直接在输入上添加这段代码(并在CSS中创建有效和无效的类)

[class.valid]="formGroup.get('title').valid && 
(formGroup.get('title').dirty || formGroup.get('title').touched)"
[class.invalid]="formGroup.get('title').invalid && 
(formGroup.get('title').dirty || formGroup.get('title').touched)"

Answer 2

根据数字格式的不同，您可以使用type="number"作为输入。

至于验证，在需要验证更改的每个FormControl中使用updateOn: 'change'选项，如下所示:

mobile: [
null, {
validators: [
// your validators here
],
asyncValidators: [
// your async validators here
],
updateOn: 'change'
}
]

这样，每次控件的值发生变化时，即每次按下键时，都会调用验证器。

Answer 3

试试这个叫做React-hook-form的神奇库

在这个库中，从表单输入中获取数据有4个阶段。

最近，我用过它，它非常神奇，使用起来很直接……请访问官方网站观看这两个视频。