时间戳

首页 > 解决方案 > 来自错误验证的 Angular 11 反应性不起作用

angular - 来自错误验证的 Angular 11 反应性不起作用

问题描述

我是 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 有效之前被禁用，我可以看到按钮保持禁用状态，直到我满足条件。但是验证消息永远不会显示。我的代码有什么问题？

标签： angularvalidation

解决方案

因为loanType只有required验证。loanName有一个min和max验证。如果addLoanTypesForm.get('loanName')选中而不是addLoanTypesForm.get('loanType').

推荐阅读