Question

0

275

Views

Validación de nombre de usuario único en Angular con tipo de devolución de datos observable del servicio

// registro-pagina.ts

 this.registerationForm = new FormGroup( { username: new FormControl(null, [ Validators.required, Validators.minLength(3), Validators.maxLength(30), Validators.pattern('^[a-zA-Z-0123456789]*$'), ] ),

// cuentaServicio.ts

 validateUsername(username: string): Observable<any> { return this.httpManager.post(authServer + "username-validator", new ValidateUsernameRequest(username)).pipe( map( (response: Response) => { return response.data; } ) ); }

// pagina-de-registro.html

 <ion-item [ngClass]="username==null ? 'at-beginning':''"> <ion-label position="floating">Kullanıcı Adı</ion-label> <ion-input name="username" formControlName="username" inputmode="text" class="ion-text-lowercase" placeholder="Kullanıcı Adı" (onchange)=(checkUsername($event)) (keypress)=(onKeyUp($event)) (keydown.space)="$event.preventDefault()"> </ion-input> </ion-item> <div class="err" *ngIf="formControls.username.errors"> <div *ngIf="formControls.username.errors.required">Kullanıcı adı zorunlu.</div> <div *ngIf="formControls.username.errors.minlength">Kullanıcı adınız çok kısa.</div> <div *ngIf="formControls.username.errors.maxlength">Kullanıcı adınız çok uzun.</div> <div *ngIf="formControls.username.errors.pattern">Kullanıcı adınız özel karakter içeremez.</div> <div *ngIf="formControls.username.errors.checkUsername">Kullanıcı adınız alınmış.</div> </div>

Intenté codificar un validador para el nombre de usuario que verifica su disponibilidad cada vez que el usuario realiza cambios en la entrada. He luchado por ello dos días, pero estoy atascado. Entendí que necesito usar una función asíncrona que suscriba los datos provenientes de accountService.validateUseranem(control.value) pero de alguna manera no pude hacer que funcionara.

¿Alguien me puede ayudar en esto?

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-11T08:52:57.252Z

Hice lo siguiente y arreglé mi propio problema.

Creado nombre de usuario-validator.directive.ts

 import { AbstractControl, AsyncValidatorFn, ValidationErrors } from '@angular/forms'; import { Observable, of } from 'rxjs'; import { map } from 'rxjs/operators'; import { AccountService } from 'src/app/services/yon/auth/account.service'; export function existingUsernameValidator(userService: AccountService): AsyncValidatorFn { return (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => { return userService.validateUsername(control.value).pipe(map( (data) => { console.log("The result is : " + data) return (!data) ? { "usernameExists": true } : null; } )); }; }

Luego lo usé dentro de los validadores de nombre de usuario

 this.registerationForm = new FormGroup( { username: new FormControl(null, { validators: [ Validators.required, Validators.minLength(3), Validators.maxLength(20), ], asyncValidators: [existingUsernameValidator(this.accountService)], updateOn: 'change' }), email: new FormControl(null, { validators: [ Validators.required, Validators.email], asyncValidators: [existingEmailValidator(this.accountService)], updateOn: 'change' }),

como esto

También;

updateOn: 'cambio' Comprende si la entrada cambia en ese control y cada vez que cambia la entrada, comprueba el valor para la validación.

Y debido a que necesito enviar una solicitud a la API y usar ese valor devuelto como respuesta, mi validador debe ser un validador asíncrono. Además, los validadores de sincronización y aysnc deben dividirse, según tengo entendido, como lo hice yo.

0

275