我的输入字段中有一个所需类型和 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>
最佳答案
您正在混合响应式(Reactive)验证器和模板验证器。不知道为什么你要把事情复杂化, react 形式很简单。
为您打造了一个Demo与您的表格:
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)])
});
}
将其拿走,增强并根据您的需求进行调整。
关于angular - 响应式(Reactive)表单验证器在 Angular 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52232276/