我想防止密码字段中的任何空格输入。我认为我的代码是正确的，但也许有些东西已经更新，但我不知道我要做什么。
是我的代码。首先放入login.component.html，然后是login.component.ts，然后是验证器文件。
<form [formGroup]="from">
<div class="form-group">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="text"
formControlName="password"
class="form-control"
id="exampleInputPassword1">
<div *ngIf="from.controls['password'].invalid && (from.controls['password'].dirty || from.controls['password'].touched)" class="alert alert-danger">
<div *ngIf="password.errors.noSpaceAllowed">No space permitted</div>
</div>
</div>
</form>
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { TextValidator } from '../validator.validation';
@Component({
selector: 'login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent{
from = new FormGroup({
email : new FormControl('',[Validators.required]),
password : new FormControl('',[TextValidator.noSpaceAllowed]),
});
get email(){
return this.from.get('email');
}
get password(){
return this.from.get('password');
}
}
import { AbstractControl, ValidationErrors } from "@angular/forms";
export class TextValidator{
static noSpaceAllowed(control:AbstractControl) : ValidationErrors | null{
// != -1 means in contains space
if((control.value as string).indexOf('') != -1){
//fire validator
return {noSpaceAllowed : true};
}
else{
return null;
}
}
}
只需在输入字段中添加onkeypress="return event.charCode != 32"，如
<input onkeypress="return event.charCode != 32">
32是空格的ASCII码。所以，你允许所有字符，除了空格。
您可以使用模式验证器:https://angular.io/api/forms/Validators.
hello.component.ts
import { Component, Input } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";
@Component({
selector: "hello",
template: `
<form [formGroup]="form">
<div class="form-group">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input
type="text"
formControlName="password"
class="form-control"
id="exampleInputPassword1"
/>
<div
*ngIf="
form.controls['password'].invalid &&
(form.controls['password'].dirty ||
form.controls['password'].touched)
"
class="alert alert-danger"
>
<div *ngIf="password?.errors?.pattern">No space permitted</div>
</div>
</div>
</form>
`,
styles: [
`
h1 {
font-family: Lato;
}
`
]
})
export class HelloComponent {
form = new FormGroup({
email: new FormControl("", [Validators.required]),
password: new FormControl("",
[Validators.pattern(/^S*$/)] // <-- pattern with the regular expression which detects spaces
)
});
get email() {
return this.form.get("email");
}
get password() {
return this.form.get("password");
}
}