Question

我在Angular应用中使用ReactiveForms。我想如果用户输入的数字少于7个，则错误消息应该在那里显示，但是很遗憾，如果有任何错误或解决方案，它不起作用，所以请提供给我。谢谢

Service.ts

PhoneNo: ['', [Validators.required, Validators.minLength(7)]],

html

<input class="full-width has-padding has-border" formControlName="PhoneNo" type="tel" placeholder="Mobile *" />
        <img src="../../../../assets/img/required-img.png" class="required-img"
          *ngIf="service.formModel.get('PhoneNo').touched && service.formModel.get('PhoneNo').errors?.required"
          title="This fields is mandatory" data-toggle="tooltip" />
          <label *ngIf="service.formModel.get('PhoneNo').touched && service.formModel.get('PhoneNo').errors?.minLength">Minimum 7 characters required</label>

Answer 1

添加maxLength验证器，这会将输入字符限制为7个字符?

PhoneNo: ['', [Validators.required, Validators.maxLength(7) , Validators.minLength(7)]],

demo ??

Answer 2

您将maxLength作为html中的属性。您应该将其删除

代替

<input class="full-width has-padding has-border" formControlName="PhoneNo" type="tel" placeholder="Mobile *" maxlength="7" />

这样做

<input class="full-width has-padding has-border" formControlName="PhoneNo" type="tel" placeholder="Mobile *">

此外，<input>和<img>末尾不应带有封闭标签 <img/>应该是<img>

代替一起使用minLength和maxLength，您可以为其创建一个正则表达式

PhoneNo: ['', [Validators.required, Validators.pattern(^[\s\S]{7}$)]],

还要记住使用service.formModel.get('PhoneNo').errors?.pattern而不是.errors?.minLength来显示标签。

编辑 @malbarmawi非常友善，可以在此处进行演示：https://stackblitz.com/edit/angular-forms-pattern-bernj2。他还拥有另一种解决自己问题的方法。

Answer 3

从Angular的角度来看这很容易引起误解。在组件内部，您可以通过以下方式设置验证器：

[Validators.minLength(2)]

然后，您希望以下各项能够正常工作：

errors?.minLength

无论出于何种原因，他们还是决定在模板内使用以下格式显示错误消息：

errors?.minlength

唯一要做的就是用l代替L

Answer 4

它不工作的原因 - 您应该用小写，而不是驼峰式写maxlength。 minlength

也一样

Answer 5

至少需要9个字符

用户错误键为minlength而不是minLength

反应性表格MinLength验证未显示错误

5 个答案: