如何进行反应式表单验证

Question

我尝试制作一个简单的离子形式验证器： 我想要很多验证器的问题，但是：

1. 如果我使用一个验证器运行应用程序，它可以正常工作，没有任何问题示例：

employeeN: ['', Validators.required], password: ['',Validators.required],

1. 如果我使用许多验证器运行它，例如：

employeeN: ['', Validators.required,Validators.minLength(5)],
password: ['',Validators.required,Validators.pattern("a-zA-Z-0-9.?!")],

我收到此错误Expected validator to return Promise or Observable.

我错过了什么？请帮忙

这里是 home.page.html

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap" rel="stylesheet">

<ion-header [translucent]="true" class="ion-no-border">
  <ion-toolbar>
    <div class="black-circle"></div>
    <ion-title class="ion-text-center custom-font">Se Connecter</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <svg class="back-bolb" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path fill="#CCCCCC" d="M65,-20C70,-5.6,50.1,18,26.8,34.3C3.5,50.7,-23.3,59.7,-41.2,48.6C-59.1,37.5,-68.2,6.2,-59.9,-12.8C-51.5,-31.7,-25.8,-38.3,2.1,-39C30,-39.7,59.9,-34.4,65,-20Z" transform="translate(100 100)" />
  </svg>

  <div class="ion-padding">

    <form class="ion-no-padding" [formGroup]="Form" (ngSubmit)="logForm()">
       <div class="wrap-input">
         <input class="input" type="number" formControlName="employeeN" required placeholder="Numero de matricule">
       </div>
      <div *ngIf="Form.get('employeeN').hasError('required')&& !Form.get('employeeN').pristine">la matricule est fause</div>
       <div class="wrap-input">
        <input class="input" type="password" formControlName="password" required placeholder="Le Mot de passe">
       </div>
       <div class ="container-form-btn">
        <button [disabled]="!Form.valid" class="form-btn custom-font">
          Soumettre
        </button>
       </div>
    </form>

  </div>
</ion-content>

这里是 home.page.ts

import { Component } from '@angular/core';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
   Form : FormGroup;



  constructor(private formBuilder: FormBuilder) {
    this.Form = this.formBuilder.group({
      employeeN: ['', Validators.required,Validators.minLength(5)],
      password: ['',Validators.required,Validators.pattern("a-zA-Z-0-9.?!")],
    });
  }

  logForm(){
    console.log(this.Form.value)
  }

 get employeeN(){
   return this.Form.get('employeeN');
 }
 get password(){
   return this.Form.get('password');
 }


}

请查看照片enter image description here

Answer 1

响应式表单输入验证接受单个验证器或验证器数组。所以改变你的实现

this.Form = this.formBuilder.group({
      employeeN: ['', Validators.required,Validators.minLength(5)],
      password: ['',Validators.required,Validators.pattern("a-zA-Z-0-9.?!")],
    });

到

this.Form = this.formBuilder.group({
      employeeN: ['', [Validators.required,Validators.minLength(5)]],
      password: ['',[Validators.required,Validators.pattern("a-zA-Z-0-9.?!")]],
    }); 

希望这能解决您的问题。