gpt4 book ai didi

angular - FormBuilder 验证工作不正常

转载 作者:太空狗 更新时间:2023-10-29 18:29:23 28 4
gpt4 key购买 nike

我有这个实现 FormBuilder 的表单。

我需要在输入字段下显示我的自定义验证消息。使用下面的代码,验证器可以在输入字段为空白但不显示我的自定义验证时显示红色的“错误”文本。

.html.ts 请看下面的代码

<form [formGroup]="subscriptionForm">
<h3 style="color: gray; text-align: center;">Registration</h3>
<div class="row">
<div class="col-md-6">
<div class="md-form">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" formControlName="UserName" name='UserName' id="UserName" class="form-control" mdbInputDirective>
<label for="UserName">Your UserName</label>
<div *ngIf="UserName?.invalid && (UserName?.dirty || UserName?.touched)" class="alert alert-danger">
<div *ngIf="UserName?.errors.required">
Username is required.
</div>
</div>
</div>
</div>
</div>
</form>

constructor(private fb: FormBuilder) { }

ngOnInit() {
this.subscriptionForm = this.fb.group({
UserName: [null, Validators.required],
});
}

我已经阅读了 Angular - 表单验证文档,那是我获得代码的地方,但我做错了。谢谢你。

最佳答案

努力改变

*ngIf="UserName?.invalid && (UserName?.dirty || UserName?.touched)"

*ngIf="subscriptionForm.get('UserName').hasError('required') && subscriptionForm.get('UserName').touched"

在 View 中:

<div *ngIf="subscriptionForm.get('UserName').hasError('required') && subscriptionForm.get('UserName').touched" class="alert alert-danger">
Username is required.
</div>

请试试这个演示:

https://stackblitz.com/edit/angular-5xtbxm?file=app/app.component.html

关于angular - FormBuilder 验证工作不正常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50146450/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com