title: My form returns null value in the submit Angular
body: <p>I am working on a personal project with Angular. I am occupying the forms, but when I submit my form using the submit button, the value it has is null.
  <em>This is the HTML code</em></p>
  
  <pre><code>&lt;form [formGroup]="checkoutform" (ngSubmit)="onSubmit($event)"&gt;
  &lt;mat-form-field class="example-full-width"&gt;
      &lt;mat-label&gt;Nro en Pokedex&lt;/mat-label&gt;
      &lt;input matInput placeholder="Ingrese ID Pokemon"
      class="input"
      formControlName="pokeid"&gt;
  &lt;/mat-form-field&gt;
  &lt;div *ngIf="checkoutform.get('pokeid').errors &amp;&amp; checkoutform.get('pokeid').dirty"&gt;
      &lt;p class="pp" *ngIf="checkoutform.get('pokeid').hasError('required')"&gt;Este campo es obliatorio&lt;/p&gt;
      &lt;p class="pp" *ngIf="checkoutform.get('pokeid').hasError('pattern')"&gt;Solo numeros&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="containerButton"&gt;
      &lt;button mat-raised-button color="primary"
      class="button"
      [disabled]="checkoutform.invalid"
      type="submit"
      &gt;Buscar Pokemon&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><em>This is the TS code:</em></p>
  
  <pre><code>   import { Component, OnInit } from '@angular/core';
  import { FormBuilder, Validators } from '@angular/forms';
  import { PokeServiceService} from './../../../core/services/poke-service.service';
  
  @Component({
    selector: 'app-bar-search',
    templateUrl: './bar-search.component.html',
    styleUrls: ['./bar-search.component.scss']
  })
  export class BarSearchComponent implements OnInit {
    checkoutform;
    constructor(
      private formbuilder: FormBuilder,
      private pokeservice: PokeServiceService
    ) {
      this.buildForm();
     }
  
    ngOnInit(): void {
    }
    private buildForm() {
      this.checkoutform = this.formbuilder.group({
        pokeid: ['', [Validators.required, Validators.pattern('^[0-9]*$')]],
      });
    }
    get pokeidField() {
      return this.checkoutform.get('pokeid');
    }
    onSubmit(event: Event) {
      event.preventDefault();
      this.checkoutform.reset();
      if (this.checkoutform.valid) {
        var poked = this.checkoutform.value;
        this.pokeservice.getPokebyID(poked)
        .subscribe((newPoke) =&gt; {
          console.log(newPoke);
        });
      } else {
        console.log(this.checkoutform.value);
        console.log(poked.pokeid);
        console.log('error');
      }
      }
    }
  </code></pre>
  
  <p><em>In the TS Code, implement some console.log to see the value of each variable, but they all return null to me</em></p>
  
  <p><a href="https://i.stack.imgur.com/IyMWe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IyMWe.png" alt="enter image description here"></a></p>