Phone number disapears Angular with netlify forms

I am developing an angular app with Netlify forms to collect contact info. The form works and shows every data except phone number. I am not sure what causes the problem. Here’s the code.

Index.html

<form name="contact" netlify netlify-honeypot="bot-field" hidden>
  <input type="text" name="name">
  <input type="text" name="organization">
  <input type="email" name="email">
  <input type="text" names="phone">
  <input type="text" name="message">
</form>

contactFormComponent.ts

createForm() {
  this.contactForm = this.builder.group({
    name: ['', Validators.required],
    organization: [''],
    email: ['', [Validators.compose([Validators.required, Validators.email])]],
    phone: [, [Validators.compose([Validators.required, Validators.minLength(10)])]],
    message: ['', Validators.required],
  });
}

onSubmit() {
  this.dialogRef.close();
  this.netlify.submitContact(this.contactForm.value).subscribe(
    () => {
      this.contactForm.reset();
      this.stats.open(SuccessComponent, {
        panelClass: 'mat-elevation-z6'
      });
    },
    err => {
      this.errorMsg = err;
      this.stats.open(ErrorComponent, {
        panelClass: 'mat-elevation-z6'
      });
    }
  );
}

form service

submitContact(contactEntry: Contact): Observable<string> {
  const entry = new HttpParams({
    fromObject: {
      'form-name': 'contact',
      ...contactEntry
    }
  });

  return this.submitEntry(entry);
}

private submitEntry(entry: HttpParams): Observable<string> {
  return this.http.post(
    '/',
    entry.toString(),
    {
      // eslint-disable-next-line @typescript-eslint/naming-convention
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      responseType: 'text'
    }
  ).pipe(catchError(this.handleError));
}

private handleError(err: HttpErrorResponse) {
  let errMsg = '';

  if (err.error instanceof ErrorEvent) {
    errMsg = `A client-side error occurred: ${err.error.message}`;
  } else {
    errMsg = `An error occurred. Code: ${err.status}. Message: ${err.message}`;
  }

  return throwError(errMsg);
}

I don’t know what I am missing here.

I just don’t see the phone number attribute on Netlify forms

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information such as what you have already tried, and a link to your live form. :slight_smile: