如何进行反应式表单验证
how to make reactive form validation
我尝试制作一个简单的离子形式验证器:
我想要很多验证器的问题但是:
- 如果我 运行 使用一个验证器的应用程序它可以正常工作示例 :
employeeN: ['', Validators.required], password: ['',Validators.required],
- 如果我 运行 它有很多验证器示例:
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
反应式表单输入验证接受单个验证器或验证器数组。所以改变你的实现从
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.?!")]],
});
希望这能解决您的问题。
我尝试制作一个简单的离子形式验证器: 我想要很多验证器的问题但是:
- 如果我 运行 使用一个验证器的应用程序它可以正常工作示例 :
employeeN: ['', Validators.required], password: ['',Validators.required],
- 如果我 运行 它有很多验证器示例:
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
反应式表单输入验证接受单个验证器或验证器数组。所以改变你的实现从
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.?!")]],
});
希望这能解决您的问题。