Form value is undefined or empty Angular 14

Question

I am getting the form values as undefined upon form submit.


   @ViewChild('someForm', { static: true }) form: ElementRef<HTMLFormElement>;
   public apiReponse: JsonResponse;
   this.route.queryParams
           .pipe(
               switchMap((params) =>
                   this.authService.getToken$(
                     param1, param2
                   )
               ),
               first(),
               takeUntil(this.ngUnsubscribe$)
           )
          .subscribe({
               next: (returnJson) => {
                   const responseObj = JSON.parse(returnJson);
                   this.apiReponse = responseObj;
                   console.log('response', this.apiReponse);
                   console.log('this form', this.form.nativeElement);
                   this.form.nativeElement.submit();
               },
               error: () => {
                   console.log('Some error ');
               },
           });

and my form is

  <form
   #someForm
   ngNoForm
   method="post"
   enctype="application/x-www-form-urlencoded"
    >
   <input type="hidden" id="token" name="token" [value]="apiReponse?.token" />
    </form>

try to write `this.form.nativeElement.submit();` in setTimeout — Sai Manoj, Jun 09 '23 at 02:52

score 0 · Answer 1 · answered Jun 09 '23 at 02:55

I have faced this kind of issue earlier and adding the submit() in setTime out worked.

subscribe({
    next: (returnJson) => {
      const responseObj = JSON.parse(returnJson);
      this.apiResponse = responseObj;
      console.log('response', this.apiResponse);
      console.log('this form', this.form.nativeElement);
      setTimeout(() => {
        this.form.nativeElement.submit();
      }, 100); 
    },

Form value is undefined or empty Angular 14

1 Answers1