I am trying to prevent any spaces from being entered in the password field, but I suspect that my code may need updating. Here is the code I have so far: first the login.component.html, then the login.component.ts, and finally the validator file.
<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;
}
}
}