Hello friends, I am still a beginner in angular & firebase. These few days I found a few problems.
- how to check the value of the formgroup with firebase. Then I want to create "username already used "
Whereas, the username is already stored in the database. But why can still be used.
This is my code
USER. TS
static checkUsername(control: FormControl): any {
return new Promise(resolve => { //Fake a slow response from server setTimeout(() => { if(control.value.toLowerCase() === "greg"){ resolve({ "username taken": true }); } else { resolve(null); } }, 2000); });
}
Signup.ts
testing: FormGroup;
this.testing = formBuilder.group({
email:[‘’,Validators.compose([Validators.required, Validators.pattern(‘[a-zA-Z0-9.]+[a-zA-Z0-9.%±]+@[a-zA-Z0-9.-]+’)]),UserProvider.checkUsername],
displayName:[‘’, Validators.compose([Validators.maxLength(15), Validators.required])]});
Signup.html
<ion-label><ion-icon name="person"></ion-icon></ion-label> <ion-input [class.invalid]="!testing.controls.displayName.valid && (testing.controls.displayName.dirty)" maxlength="15" minlength="4" style="color:white;border-bottom-color:white;box-shadow:none;" [(ngModel)]="newuser.displayName" formControlName="displayName" type="text" placeholder="Username"></ion-input> </ion-item> <p *ngIf="testing.controls.displayName.pending" style="padding:0px !important; border-bottom:none !important;border-top:none;font-size: 14px;margin-top:10px;background:none;border-bottom:1px solid white;box-shadow:none;"> Checking username... </p> <p *ngIf="!testing.controls.displayName.valid && !testing.controls.displayName.pending && (testing.controls.displayName.dirty)" style="padding:0px !important; border-bottom:none !important;border-top:none;font-size: 14px;margin-top:10px;background:none;border-bottom:1px solid white;box-shadow:none;"> Sorry, you cannot use this username </p>
Please Help.