Send Json file for Async Validation

146
February 02, 2022, at 6:50 PM

I am working with Angular reactive forms and async validation and instead of a normal value I want to send Json file for validation.

My form Looks like

createGoogleCloudForm = new FormGroup(
{
  name: new FormControl('', [Validators.required, Validators.pattern(RegexUtil.cloudName)]),
  organizationId: new FormControl(''),
  config: new FormControl(),
  //zones: new FormControl({ value: '', disabled: true }, Validators.required),
},
undefined,
 //[GoogleCloudCredentialsValidator.checkGoogleCloudCredentials(this.cloudCredentialsCheckerService)]);

My HTML file looks like

<form class="form" [formGroup]="createGoogleCloudForm" (ngSubmit)="createGoogleCloudCredential()">
  <div class="image-upload">
    <label for="background-upload" class="button button--outline display--inline-flex">Choose Config File</label>
    <span class="file-name">
      {{ googleCloudFormData?.get('config')?.name | truncate: 40:'...' 
  }}
  </span>
  <input
    type="file"
    id="background-upload"
    class="hidden-input"
    formControlName="config"
    (change)="fileChange($event.target.files, 'config')"
    />
  </div>
</div>
<div class="display--flex justify--content--end">
  <button class="button button--primary display--inline-flex" type="submit" [disabled]="!createGoogleCloudForm.valid">
    <svg-icon key="circle-plus"></svg-icon> Add Cloud Credentials
  </button>
</div>
</form>

The file change method is like

fileChange(files: File[], controlName: string) {
console.log(files);
if (files && files.length > 0) {
  this.googleCloudFormData.append(controlName, files[0]);
  console.log('adding');
  this.createGoogleCloudForm.setAsyncValidators([
    GoogleCloudCredentialsValidator.checkGoogleCloudCredentials(this.cloudCredentialsCheckerService),
  ]);
}
}

The Async Validator is

static checkGoogleCloudCredentials(cloudCredentialsCheckerService: CloudCredentialsCheckerService): AsyncValidatorFn {
return (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> =>
  // half a second delay to prevent BE requesting after each user's key stroke
  timer(500).pipe(
    switchMap(() => cloudCredentialsCheckerService.checkGoogleCloud(control.get('config').value)),
    map(() => null),
    catchError(() => of({ invalidGoogleCloudCredentials: true })),
  );
}

and the service

checkGoogleCloud(file: File[]) {
  return this.http.post(`${this.baseUrl}/google`, { file });
}

The problem is when I upload the file the async validator does not get fired, I want to send the file with the request.

Any ideas?

Rent Charter Buses Company
READ ALSO
I&#39;m on windows os, I&#39;m trying to export the data from mysql workbench to my local file system. But showing an error message like (no disk space)

I'm on windows os, I'm trying to export the data from mysql workbench to my local file system. But showing an error message like (no disk space)

I've searched many threads online but none of them worked for meI found solutions for linux but there is no solution related to windows operating system

115
How can I fade images in sequence? [duplicate]

How can I fade images in sequence? [duplicate]

How do I stop the second image from beginning to fade in until the first one has fully faded in?

117
What is the difference between addFirst and addLast in Deque interface

What is the difference between addFirst and addLast in Deque interface

They seem like behaving in the same way, throwing out the elements in a LIFO pattern

132
Wordpress username generation based on additional user input

Wordpress username generation based on additional user input

Ive implemented an additional input in my Wordpress registration for a phone number, I'd also like this to be the username value for a client's needsThe option in Woocommerce to generate based on name and email is there so how would I hook it into the phone's...

129