用于检查可用性的 Angular 验证器

Question

I'm creating a Reactive Form in angular to register some devices. In this form I ask for a serial number, and I want to check if this serial number is already registered in my database.

When I type in the input form it activates the function serialNumAvailability to display or not a message. This function calls a service function called checkSerialNumAvailability which send a get request to my back-end. I made some console.log and used Postman to test the get request, and it seems to work fine on the back-end side. But at the moment I type one character in the input field, I go back to my home page, and I can't understand why...

Here is my HTML template verification:

<input formControlName="serialNum" type="text" class="form-control" placeholder="Ex: SL07101-BL" name="serialNum" required>
<div *ngIf="f.submitted " class="help-block mt-2 text-danger" i18n> Serial Number is required</div>
<div *ngIf="serialNum?.value.errors.serialNumAvailability" i18n> Serial Number already registered</div>

Then my component function serialNumAvailability :

serialNumAvailability(control: FormControl) {

    return Observable.timer(500).switchMap(() => {

      return this.portalService.checkAvailabilitySerialNum(control.value)
        .map(res => {
          if (res && res.length == 1 && res[0].serialNum) {
            console.log("ON RENVOIE TRUE");
            return { serialNumAvailability: true};
          }
          console.log("ON RENVOIE NULL");
          return null;
        });
    });}

My service function :

checkAvailabilitySerialNum(term: string): Observable<Portal[]> {
    let portals: Portal[];

    if (!term.trim()) {// if search is empty
      return Observable.of([]);
    }

    return this.http.get<Portal[]>(this.serverURL + `portal/?serialNum=${term}`)
    .map(Portals => Portals.filter(portals => portals.serialNum === term)
    );
  }

And finally the Node side :

router.get('/',
    function (req, res) {
        console.log("ON RENTRE BIEN DANS LA FONCTION : " + req.query.serialNum);
            return models.portals.findAll({
                attributes: ['serialNum'],
                where: {
                    serialNum: req.query.serialNum
                }
            }).then((serialNums) => {
                if (serialNums) {
                    serialNums = serialNums.map((serialNum) => {
                        serialNum = serialNum.toJSON();
                        console.log(serialNum);
                        return serialNum;
                    })
                }
                console.log("ON FAIT RES.SEND DE "+serialNums);
                res.send(serialNums);
            })
    })

I don't know why I'm redirected, if someone has encountered this problem, thanks for support :)

Answer 1

Finally the problem was solved. The redirection was due to a token interceptor which handled my request. As it was not authorized to GET information, I simply added an exception to this interceptor for my URL.

This looks like this :

if (req.headers.has(this.config.InterceptorSkipHeader)) {
      let headers = req.headers.delete(this.config.InterceptorSkipHeader);
      return next.handle(req.clone({ headers }));
    }
    if(this.authenticationService.isLoggedIn()){
      this.authenticationService.updateExpiration();
    }
    else if (this.router.routerState.snapshot.url != "/register-portal"){
      this.router.navigate(['/login'], { queryParams: { returnUrl: ''} });
    }

Thanks to those who answered :)