我是 Angular 的新手。我正在尝试通过实践来学习它。我尝试了如下反应式表单验证。它不起作用。我看不出有什么问题:-
TS:-
export class LoanTypesComponent implements OnInit {
addLoanTypesForm!: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
this.addLoanTypesForm = this.fb.group({
'loanName' : new FormControl('', [Validators.required,
Validators.maxLength(10), Validators.minLength(4)]),
'loanType' : new FormControl('', Validators.required),
'terms' : new FormControl(),
'loanDescription' : new FormControl()
});
}
}
HTML:-
<form [formGroup]="addLoanTypesForm">
<div class="form-group">
<input type="text" formControlName="loanName"> <br/>
<div class="text-danger" *ngIf="addLoanTypesForm.get('loanType')?.hasError('minlength') && addLoanTypesForm.get('loanType')?.touched ">This field minLength is 4 </div>
<div class="text-danger" *ngIf="addLoanTypesForm.get('loanType')?.hasError('maxlength') && addLoanTypesForm.get('loanType')?.touched ">This field max length is 10 </div>
<div class="text-danger" *ngIf="addLoanTypesForm.get('loanType')?.hasError('required') && addLoanTypesForm.get('loanType')?.touched ">This field is required </div>
</div>
<input type="text" formControlName="loanType"> <br/>
<div *ngIf="addLoanTypesForm.get('loanType')?.hasError('required') && addLoanTypesForm.get('loanType')?.touched ">This field is required </div>
<input type="checkbox" formControlName="terms"> Accept Terms! <br/>
<textarea fromControlName="loanDescription"></textarea><br/>
<button [disabled]="!addLoanTypesForm.valid" (click)="addLoanType()">Add Loan</button>
我总是只有一个错误这个字段是必需的。对于最小和最大长度验证从不显示。由于我的提交按钮在 from 有效之前被禁用,我可以看到按钮保持禁用状态,直到我满足条件。但是验证消息永远不会显示。我的代码有什么问题?
因为loanType
只有required
验证。loanName
有一个min
和max
验证。如果addLoanTypesForm.get('loanName')
检查而不是addLoanTypesForm.get('loanType')
.
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句