如何解决如何在模板中检索反应式表单验证器的参数?
我已经开始在表单中使用ReactiveForms,但是有些事情困扰着我。其中之一是,如果我想显示相关的错误消息,则需要向用户提供一些信息以纠正其错误。
例如,如果我有以下登录表单:
loginForm = this.formBuilder.group({
email: new FormControl(
'',Validators.compose([Validators.required,Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])
),password: new FormControl('',Validators.minLength(8)])),});
对于密码,我需要告知用户密码长度至少为8个字符。
我绝对可以在错误消息中对此进行硬编码:
<div
class="error-message alert alert-danger"
*ngIf="loginForm.get('password').hasError('minLength')" >
<ion-text color="danger" class="text">
<ion-icon class="icon" name="alert-outline"></ion-icon>
Password has to be at least 8 characters long
</ion-text>
</div>
它可以工作,但是当我在模型中更改此值的那一天,您必须在消息中更改它。更糟糕的是,如果已本地化,则必须使用正确的值更新所有本地化。
那么,如何检索例如模板中的minLength值?这一定有可能吧?
解决方法
检查书写错误
{{loginForm.get('password')?.errors|json}})
您会看到这是一个带有requiredLength
和actualLength
的对象,因此您可以编写
Password has to be at least
{{loginForm.get('password')?.errors?.minlength.requiredLength}}
characters long
,
与其为每个输入编写重复的错误消息,不如使用库为您更好地处理它。
您可以使用ngx-input-errors库以不同的语言设置一次输入错误消息,然后使用该库提供的指令在模板中自动提取并显示输入错误消息
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。