Не удается прочитать ошибку свойства на странице регистрации

Question

У меня есть форма регистрации и я хочу опубликовать ее значения в API с помощью http-вызовов. Я позаботился обо всем. Я настроил форму, которая принимает все мои значения (имя пользователя, адрес электронной почты, пароль, дату рождения, пол). Затем у меня есть служба, которая подключается к серверу, и в моем page.ts у меня есть логика аутентификации. У меня та же логика на моей странице входа, где это работает. В этой версии он все еще регистрирует Hello World в функции apiSubmit. Когда я запускаю приложение, я получаю эту ошибку: ERROR TypeError: Cannot read property 'value' of undefined at SignupPage.pus

auth.service

   apiSignup(username: string, email:string, password: string, birthdate: number, gender: string) {
    return this.http.post<any>(this.url, { username, email, password, birthdate, gender})
        .pipe(map(user => {
            // login successful if there's a jwt token in the response
            if (user && user.token) {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user));
                this.currentUserSubject.next(user);
            }

            return user;
        }));
}

page.html

  <form [formGroup]="signupForm" (ngSubmit)="apiSubmit()">
...
  <ion-button 
    type="submit"
    expand="block"  
    shape="round" 
    color="danger" 
    [disabled]="!signupForm.valid"
  > Sign Up </ion-button>

  </form>

page.ts

constructor(
    private authService: AuthService, 
    private router: Router, 
    public alertController: AlertController,
    private loadingController: LoadingController,
    public modalController: ModalController,
    public menu: MenuController
    ) {}

  ngOnInit() {
      this.signupForm = new FormGroup({
        'username': new FormControl('', Validators.compose([
          UsernameValidator.usernameNotAvailable,
          Validators.maxLength(25),
          Validators.minLength(5),
          Validators.pattern('^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$'),
          Validators.required
        ])),
        'password': new FormControl('', Validators.compose([
        Validators.minLength(5),
        Validators.required
        ])),
        'email': new FormControl('', Validators.compose([
          Validators.required,
          Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
        ])),
        'birthdate': new FormControl(Validators.required),
        'gender': new FormControl(this.genders[0], Validators.required)
      });


      }
  // convenience getter for easy access to form fields
  get f() { 
    console.log(this)
    return this.signupForm.value; 
    } // value or controls


apiSubmit() {
   console.log('Hello World');
   this.submitted = true;

   //if form is invalid => stop
   if (this.signupForm.invalid) {
       return;
   }

   this.isLoading = true;
   this.authService.apiSignup(this.f.username.value,
   this.f.email.value, this.f.password.value, this.f.birthdate.value, this.gender.value)
       .pipe(first())
       .subscribe(
         data => {
          this.router.navigate(['exlpore']);
       },
         error => {
          this.error = error;
          this.isLoading = false;
       }
      )
 }