Angular 8 - 表单验证工作不正常

Question

<mat-form-field class="input-label-add">
  <input matInput placeholder="Registration **" formControlName="registration">
  <mat-error *ngIf="addLockerForm.get('registration').hasError('maxlength')">registration cannot exceed 8 characters</mat-error>
  <mat-error *ngIf="addLockerForm.get('registration').errors">registration or surname is required</mat-error>
</mat-form-field>

this.addLockerForm =  this.formBuilder.group({
    locker_serial_number: [null, Validators.required],
    customer_surname: [null],
    registration: [null, Validators.maxLength(10)],
    mobile: [null],
    email: [null],
    date_in: [null, Validators.required],
    date_out: [null, Validators.required], 
  },
  { validator: [this.validateCustomerDetails, this.validateCustomerContact] });

addLockerForm.get('registration').hasError('maxlength') 始终为假

Answer 1

你能试试这个吗？

addLockerForm.get('registration').errors.maxlength

https://angular.io/guide/form-validation#validator-functions

编辑 1

您不需要使用 .errors。

请像这样更新您的代码：

<mat-form-field class="input-label-add">
  <input matInput placeholder="Registration **" formControlName="registration">
  <mat-error *ngIf="addLockerForm.get('registration').hasError('maxlength')">registration cannot exceed 8 characters</mat-error>
  <mat-error *ngIf="addLockerForm.get('registration').hasError('required')">registration or surname is required</mat-error>
</mat-form-field>

registration: [null, [Validators.required, Validators.maxLength(8)]],

Answer 2

  *ngIf="addLockerForm.controls?.registration?.invalid && addLockerForm.controls?.registration?.touched"

this.addLockerForm = formbuilder.group({
     registration: [
       "",
       [
         Validators.required,
         Validators.minLength(4),
         Validators.maxLength(8),
         Validators.pattern(Your Pattern)
       ]
     ]  
  }

如果您正在使用 FormBuilder 和 Validator 在你的 Ts 文件中使用 FormBuilder

Answer 3

尝试以下代码

<mat-form-field class="input-label-add">
   <input matInput placeholder="Registration **" formControlName="registration">
   <div *ngIf="registration.errors">
      <mat-error *ngIf="addLockerForm.get('registration').errors.maxlength">
         registration cannot exceed 8 characters</mat-error>
      <mat-error *ngIf="addLockerForm.get('registration').errors.required">registration or surname is required</mat-error>
   </div>
</mat-form-field>

Answer 4

问题出在我的自定义验证方法中，我删除了以下表单控件的所有错误。我忘记了这个方法。谢谢大家的帮助。

validateCustomerDetails(g: FormGroup) {
if ((isNullOrUndefined(g.get('registration').value) || g.get('registration').value == "") &&
  (isNullOrUndefined(g.get('customer_surname').value) || g.get('customer_surname').value == "")) {
  g.controls['registration'].setErrors({ 'empty': true });
  g.controls['customer_surname'].setErrors({ 'empty': true });
}
else {
  g.controls['registration'].setErrors(null);
  g.controls['customer_surname'].setErrors(null);
}

Angular 8 - 表单验证工作不正常

Angular 8 - form validation is not working properly

validation

maxlength

angular

angular-reactive-forms

formgroups