angular - 反应式表单验证器在 Angular 中不起作用
问题描述
我的输入字段中有一个 required 类型和 maxLength 的验证器,我试图在我的 HTML 上使用最干净的代码。我尝试执行以下操作但无法正常工作
HTML
(这行不通)
<form [formGroup]="creditCardForm">
<input type="text" pInputText formControlName="cardHolderName" required maxlength #cardHolderName/>
<label *ngIf="form.cardHolderName.invalid &&
(form.cardHolderName.dirty || form.cardHolderName.touched)" class="invalidField">Cardholder name is required</label>
</form>
TS
form = this.buildCreditCardForm(this.fb).controls;
.
.
buildCreditCardForm(fb: FormBuilder): FormGroup {
return fb.group({
cardHolderName: ['', [Validators.required, Validators.maxLength(50)]],
.
.
}
HTML(这可行,但它太长了,很脏)
<form [formGroup]="creditCardForm">
<input type="text" pInputText formControlName="cardHolderName" required maxlength #cardHolderName/>
<label *ngIf="fcreditCardForm.controls.cardHolderName.invalid &&
(creditCardForm.controls.cardHolderName.dirty || creditCardForm.controls.cardHolderName.touched)" class="invalidField">Cardholder
name is required</label>
</form>
解决方案
您正在混合反应式验证器和模板验证器。不知道你为什么把事情复杂化,反应形式很简单。
用你的表格给你一个演示:
HTML:
<form [formGroup]="creditCardForm">
<input type="text" formControlName="cardHolderName"/>
<label *ngIf="creditCardForm.get('cardHolderName').invalid">Cardholder name is required</label>
</form>
零件:
creditCardForm;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.creditCardForm = new FormGroup({
'cardHolderName': new FormControl(null, [Validators.required, Validators.maxLength(5)])
});
}
把它拿走,增强并根据您的需要进行调整。
推荐阅读
- android - 如何禁用Android App的多点触控功能
- google-search-console - Google 控制台 - 错误:可点击元素靠得太近 - 受影响的页面:0
- perl - 如何在不调用 perl 函数的情况下测试签名违规?
- asp.net-core - 基于 .NET Framework 的 .NET Core 2.1 Web API 的授权问题
- javascript - 即使在转换为 ISO 格式后,也会出现 Moment js Deprecation 警告。我转成iso格式还是不行
- python - 在 pandas/python 中有效地解析时间格式
- c# - 将来自 Xam.Plugin.Media 5.0.1 的 imageSource 转换为 Xamarinforms 中的字节数组?
- python - 使用列表匹配包含整个单词的正则表达式
- servlets - 如何避免Java request.getQueryString() 得到转义字符串
- java - Kerberos cannot use ticket cache in Java code