Angular/auth
1
0
Fork 0
Code Issues 1 Pull requests 2 Projects Releases Packages Wiki Activity Actions

zip validation

Browse source
This commit is contained in:
Jan K9f 2025-08-20 10:32:00 +02:00
commit 18598ddfe2
Signed by: jank
GPG key ID: 22BEAC760B3333D6
3 changed files with 34 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/component/auth/register/register.component.html
View file

@ -76,6 +76,12 @@
formControlName="zip"
type="text"
/>
@if (
addressGroup.controls["zip"].errors &&
addressGroup.controls["zip"].touched
) {
<p style="color: red">Zip is invalid</p>
}
</div>
</div>
</div>

17
src/app/component/auth/register/register.component.ts
View file

@ -18,10 +18,15 @@ export default class RegisterComponent {
fb: FormBuilder = inject(FormBuilder);
emailGroup: FormGroup = this.fb.group({
email: ['', [Validators.required, Validators.email]],
confirmEmail: ['', [Validators.required, Validators.email]],
});
emailGroup: FormGroup = this.fb.group(
{
email: ['', [Validators.required, Validators.email]],
confirmEmail: ['', [Validators.required, Validators.email]],
},
{
validators: CustomValidators.email(),
},
);
passwordGroup: FormGroup = this.fb.group(
{
@ -36,7 +41,7 @@ export default class RegisterComponent {
addressGroup: FormGroup = this.fb.group({
city: ['', Validators.required],
state: ['', Validators.required],
zip: ['', Validators.required],
zip: ['', Validators.required, CustomValidators.zipCode()],
street: ['', Validators.required],
nr: ['', Validators.required],
});
@ -51,7 +56,7 @@ export default class RegisterComponent {
submit() {
if (!this.form.valid) {
console.log(this.form.controls['password'].errors);
console.log(this.addressGroup.controls['zip']);
console.log(this.form.value);
return;
}

18
src/app/service/custom.validators.ts
View file

@ -1,4 +1,4 @@
import { AbstractControl, ValidatorFn } from '@angular/forms';
import { AbstractControl, AsyncValidatorFn, ValidatorFn } from '@angular/forms';
export default class CustomValidators {
public static email(): ValidatorFn {
@ -11,6 +11,22 @@ export default class CustomValidators {
};
}
public static zipCode(): AsyncValidatorFn {
return async (zip: AbstractControl) => {
if (String(zip.value).length != 5) {
return { zipInvalid: true };
}
const response = await fetch('https://zippopotam.us/DE/' + zip.value);
if (false == response.ok) {
return { zipInvalid: true };
}
return {};
};
}
public static password(): ValidatorFn {
return (passwordGroup: AbstractControl) => {
console.log(passwordGroup);