FormBuilder验证未正常工作
FormBuilder验证未正常工作
提问于 2018-05-03 11:23:04
我有一个实现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 - Form验证文档，这就是我获得代码的地方，但我不能正确地理解它。谢谢。
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-05-03 11:37:25
试着改变
*ngIf="UserName?.invalid && (UserName?.dirty || UserName?.touched)"
至
*ngIf="subscriptionForm.get('UserName').hasError('required') && subscriptionForm.get('UserName').touched"
在视图中：
<div *ngIf="subscriptionForm.get('UserName').hasError('required') && subscriptionForm.get('UserName').touched" class="alert alert-danger">
Username is required.
</div>请尝试此Demo：
https://stackblitz.com/edit/angular-5xtbxm?file=app/app.component.html
Stack Overflow用户
发布于 2018-05-03 11:57:26
问题是您缺少文档中的getter方法，例如：
get name() { return this.heroForm.get('name'); }
get power() { return this.heroForm.get('power'); }现在，当他们在模板中访问name时，他们实际上是在访问this.heroForm.get('name')
所以你需要在你的*ngIf中做的就是检查：
subscriptionForm.get('UserName').errors.requiredStack Overflow用户
发布于 2018-05-03 11:34:38
在视图中使用subscriptionForm.controls.UserName而不是UserName
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50146450
复制相关文章
相似问题