Блог

Я работаю над приложением, которое использует проблемы GitLab для отображения диаграммы. Для аутентификации с помощью api я хочу использовать токен доступа, который добавляется к запросу get следующим образом:

https://gitlab.de/api/v4/issues ?private_token=************

У меня есть форма, в которой пользователь вводит личный токен доступа. Я хочу проверить токен с помощью пользовательского средства проверки ввода и добавить сообщение об ошибке под полем ввода (я использую material angular).

Я использую службу для выполнения HTTP-запросов:

   private makeGetRequest(endpoint: string, params: HttpParams) {
    return this.http.get<Issue[]>(this.buildURL(endpoint), {params}).pipe(catchError(this.handleError));
  }

  public getIssues(): Observable<Issue[]> {
    let params = new HttpParams().set('private_token', this.access_token);
    return this.makeGetRequest('/issues', params)
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong.
      console.error(
        `Backend returned code ${error.status}, `  
        `body was: ${error.error}`);
    }
    // Return an observable with a user-facing error message.
    return throwError(
      'Something bad happened; please try again later.');
  }
  

В компоненте я добавил функцию валидатора. Я пытаюсь выполнить некоторый вызов API, а затем проверить, сработало ли это.

   // Form group with validation
  authForm = new FormGroup({
    url: new FormControl('gitlab.de'),
    token: new FormControl('', [this.validateToken])
  });


  // Add error message below input fields
  getErrorMessage() {
    if (this.authForm.controls.token.hasError('required')) {
      return 'You must enter a token';
    }
    return this.authForm.controls.token.hasError('tokenInvalid') ? 'Not a valid token' : '';
  }

// Check if token is valid using api
  validateToken(control: AbstractControl): { [key: string]: any } | null {
    if (control.dirty || control.touched) {
      this.apiService.getIssues().subscribe((response) => {}, (error) => {return {'tokenInvalid': true}})
    } else {
      return null
    }
  }
  

Есть несколько руководств, но я не могу их обойти.
Когда я что-то вводю на входе, я просто получаю этот вывод в консоли:
ОШИБКА TypeError: это не определено

вам не нужно создавать сервис, вы можете получить доступ к http-модулю с помощью инъекции depenceny. сначала настройте http-модуль:

в app.module.ts:

 import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent],
})
  

создайте класс для написания пользовательского асинхронного валидатора:

 import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AsyncValidator, FormControl } from '@angular/forms';
import { map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

// this class needs to use the dependency injection to reach the http client to make an api request
// we can only access to http client with dependecny injection system
// now we need to decorate this class with Injectable
@Injectable({
  providedIn: 'root',
})
export class HttpRequestValidation implements AsyncValidator {
  // with this code inside the constructor, we access to "http"
  constructor(private http: HttpClient) {}
  
  // validate() will be called by the component that implments the 
     form which has a  different context. "this" refers to the context 
     that calls the function. so in other context, "this" will refer 
     to that context, so "this.http" will be undefined in that context 
     cause that context does not have http.
 // that is why we use arrow function here. Because, wherever you use 
    the arrow function, "this" inside arrow will always refer to the 
    object that it was created in. in this case "this" will always 
    refer to the current class (HttpRequestValidation). so "this.http" 
    will work.
  validate = (control: FormControl) => {
    // if this validator would be used by the FormGroup, you could use "FormGroup" type.
    //if you are not sure you can  use "control: AbstractControl)"
    // looks like, in your case you need for the FormControl
    const { value } = control;
    return this.http
      .post<any>('https://domain/', {
      //looks like you are checking for the token
        token: value,
      })
      .pipe(
        //   errors skip the map(). if we return null, means we got 200 response code
        map(() => {
          return null;
        }),
        catchError((err) => {
          //check the err obj to see its properties
          console.log(err);
          if (err.error.token) {
          //catchError has to return a new Observable and "of" is a shortcut
            return of({ write a meaningful obj});
          }
          return of({ write a meaningful obj});
        })
      );
  };
}
  

теперь, когда мы написали это в отдельном классе, пришло время использовать его для вашей формы.

 authForm = new FormGroup({
    url: new FormControl('gitlab.plri.de'),
    token: new FormControl('', [arrays of sync validators],asyncValidator)
  });
  

FormControl() имеет 3 аргумента. 1-е — начальное значение, второе — массив валидаторов синхронизации, 3-е — асинхронный валидатор. Поскольку реализация асинхронного валидатора является дорогостоящей, angular сначала разрешит валидаторы синхронизации. Если все валидаторы синхронизации проверили ввод, а затем будет запущена асинхронная проверка.

 import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { HttpRequestValidation } from '../validators/unique-username';

export class SignupComponent implements OnInit {
authForm = new FormGroup({
    url: new FormControl('gitlab.plri.de'),
    token: new FormControl('', [ 
                             Validators.required,
                             Validators.minLength(3)],
                             this.httpRequestValidation.validate)
  });
constructor(
    private httpRequestValidation: HttpRequestValidation
  ) {}

  ngOnInit(): void {}
}
  

Функция валидатора выполняется Angular, а не нашим кодом, что является причиной того, что ключевое слово «this» внутри вашей функции валидатора не указывает на ваш класс.

Вы можете просто привязать свою функцию validateToken к массиву Validators следующим образом:

 token: new FormControl('', [this.validateToken.bind(this)])
  

Кроме того, я бы рекомендовал вам использовать пользовательскую функцию асинхронной проверки, если вы выполняете асинхронные операции в своей функции проверки, например, возвращая обещание / наблюдаемый:

 usernameValidator(): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return this.checkIfUsernameExists(control.value).pipe(
      map(res => {
        // if res is true, username exists, return true
        return res ? { usernameExists: true } : null;
        // NB: Return null if there is no error
      })
    );
  };
}