The property 'name' is not found within the type 'FormGroup'

Question

The property 'name' is not found within the type 'FormGroup'

I am encountering an issue with form validation in my Angular app using ReactiveForms. The error message reads as follows:

Error:

src/app/pages/contact/contact.component.ts(48,32): error TS2339: Property 'assunto' does not exist on type 'FormGroup'. src/app/pages/contact/contact.component.ts(50,57): error TS2339: Property 'assunto' does not exist on type 'FormGroup'. src/app/pages/contact/contact.component.ts(51,30): error TS2339: Property 'nome' does not exist on type 'FormGroup'. src/app/pages/contact/contact.component.ts(52,33): error TS2339: Property 'empresa' does not exist on type 'FormGroup'. src/app/pages/contact/contact.component.ts(53,32): error TS2339: Property 'email' does not exist on type 'FormGroup'. src/app/pages/contact/contact.component.ts(54,34): error TS2339: Property 'telefone' does not exist on type 'FormGroup'.

Contact Component HTML

<form class="col-s4 dados-form" [formGroup]="dadosForm">

<mat-form-field style="width:100%" class="full-width">
  <input matInput placeholder="Name" formControlName="nome" required>
  <mat-error *ngIf="dadosForm.get('nome').dirty || dadosForm.get('nome').touched">
    Please fill in the name field</mat-error>
</mat-form-field> <br>

<mat-form-field style="width:100%" class="full-width">
  <input matInput placeholder="Company" formControlName="empresa" required>
  <mat-error
    *ngIf="dadosForm.get('empresa').dirty || dadosForm.get('empresa').touched">
    Please fill in the company field</mat-error>
</mat-form-field> <br>

<mat-form-field style="width:100%" class="full-width">
  <input matInput placeholder="E-Mail" formControlName="email" required>
  <mat-error
    *ngIf="dadosForm.get('email').dirty || dadosForm.get('email').touched">
    {{getMailErrorMessage()}}</mat-error>
</mat-form-field> <br>
<mat-form-field style="width:100%" class="full-width">
  <input matInput maxlength="15" id="phoneInput" formControlName="telefone" [mask]="phoneMask" placeholder="Contact Number" required />
  <mat-error
    *ngIf="dadosForm.get('telefone').dirty || dadosForm.get('telefone').touched">
    Please fill in the phone number field</mat-error>
</mat-form-field> <br>

<mat-form-field style="width:100%" class="full-width">
  <mat-label>Desired Product</mat-label>
  <mat-select matInput formControlName="assunto" required>
    <mat-optgroup *ngFor="let category of products" [label]="category.key">
      <mat-option *ngFor="let product of category.value" [value]="product">
        {{product}}
      </mat-option>
    </mat-optgroup>
  </mat-select>
  <mat-error
    *ngIf="dadosForm.get('assunto').dirty || dadosForm.get('assunto').touched">
    Please select a desired product</mat-error>
</mat-form-field><br>

<mat-form-field style="width:100%" class="full-width">
  <textarea matInput placeholder="Message" formControlName="mensagem" required></textarea>
  <mat-error
    *ngIf="dadosForm.get('mensagem').dirty || dadosForm.get('mensagem').touched">
    Please fill in the message field</mat-error>
</mat-form-field><br>

<div class="form-buttons">
  <button mat-button mat-raised-button id="submitButton" [disabled]="!dadosForm.valid" matTooltip="" color="primary" (click)="sendMail(message)">Send</button>
</div>

</form>

Contact Component Typescript

  dataForm = new FormGroup({
    nome: new FormControl('', [Validators.required]),
    empresa: new FormControl('', [Validators.required]),
    email: new FormControl('', [Validators.required, Validators.email]),
    telefone: new FormControl('', [Validators.required]),
    assunto: new FormControl('', [Validators.required]),
    mensagem: new FormControl('', [Validators.required])
  });

angular typescript angular6 angular7 angular4-forms

Answer 1

Answer №1

<div *ngIf="f.name.invalid && f.name.touched">
                                <small class="text-danger" *ngIf="f.name.errors?.required">Please enter the name!</small>
                            </div>

This is the code snippet from the TypeScript file:

get f() { return this.form.controls; }

Answer 2

<div *ngIf="f.name.invalid && f.name.touched">
                                <small class="text-danger" *ngIf="f.name.errors?.required">Please enter the name!</small>
                            </div>

This is the code snippet from the TypeScript file:

get f() { return this.form.controls; }

Answer 3

Answer №2

When encountering that error, I made a small adjustment in the first input as an example:

<mat-error *ngIf="dadosForm.get('nome').dirty || dadosForm.get('nome').touched">O campo nome deve ser preenchido</mat-error>

To simplify the validation within the *ngIf, you can make the following change:

<mat-error *ngIf="dadosForm.get('nome').invalid && (dadosForm.get('nome').dirty || dadosForm.get('nome').touched)">O campo nome deve ser preenchido</mat-error>

In my Angular 10+ project using the same input template, I avoid using dirty and touched. Instead, for a unique validation, I rely on dadosForm.invalid within the *ngIf to display the specific error message being validated.

An alternative approach would be:

<mat-error *ngIf="dadosForm.get('nome').invalid">O campo nome deve ser preenchido</mat-error>

Or even simpler:

<mat-error *ngIf="dadosForm.invalid">O campo nome deve ser preenchido</mat-error>

Answer 4

When encountering that error, I made a small adjustment in the first input as an example:

<mat-error *ngIf="dadosForm.get('nome').dirty || dadosForm.get('nome').touched">O campo nome deve ser preenchido</mat-error>

To simplify the validation within the *ngIf, you can make the following change:

<mat-error *ngIf="dadosForm.get('nome').invalid && (dadosForm.get('nome').dirty || dadosForm.get('nome').touched)">O campo nome deve ser preenchido</mat-error>

In my Angular 10+ project using the same input template, I avoid using dirty and touched. Instead, for a unique validation, I rely on dadosForm.invalid within the *ngIf to display the specific error message being validated.

An alternative approach would be:

<mat-error *ngIf="dadosForm.get('nome').invalid">O campo nome deve ser preenchido</mat-error>

Or even simpler:

<mat-error *ngIf="dadosForm.invalid">O campo nome deve ser preenchido</mat-error>

Answer 5

Answer №3

Utilize the form builder FormBuilder para validações

Primeiro importe essas dependências

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

Crie uma variável para o grupo de formulários

formGroupName: FormGroup;

constructor(private _formBuilder: FormBuilder) { }

Defina o código de validações no método ngOnInit

this.formGroupName = this._formBuilder.group({
    nome: ['', Validators.required],
    empresa: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    telefone: ['', Validators.required],
    assunto: ['', Validators.required],
    mensagem: ['', Validators.required]
});

Tente com isso.

Answer 6

Utilize the form builder FormBuilder para validações

Primeiro importe essas dependências

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

Crie uma variável para o grupo de formulários

formGroupName: FormGroup;

constructor(private _formBuilder: FormBuilder) { }

Defina o código de validações no método ngOnInit

this.formGroupName = this._formBuilder.group({
    nome: ['', Validators.required],
    empresa: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    telefone: ['', Validators.required],
    assunto: ['', Validators.required],
    mensagem: ['', Validators.required]
});

Tente com isso.

Answer 7

Answer №4

If you happen to encounter this particular error while working on a similar task as mine, the following information might be of assistance. I received the error message:

"Property 'group' does not exist on type 'FormGroup'.ts(2339)"

this.searchForm = this.fb.group({
  clientName: ['', [noWhitespaceValidator]],
  startDate: [''],
  endDate: [''],
})

The reason behind this error was that I had initialized the form without importing the formBuilder. Consequently, without injecting it as a constructor dependency, the error occurred because 'group' could not be found in fb.group.

I share this in hopes that it may be beneficial to someone facing a similar issue.

Answer 8

If you happen to encounter this particular error while working on a similar task as mine, the following information might be of assistance. I received the error message:

"Property 'group' does not exist on type 'FormGroup'.ts(2339)"

this.searchForm = this.fb.group({
  clientName: ['', [noWhitespaceValidator]],
  startDate: [''],
  endDate: [''],
})

The reason behind this error was that I had initialized the form without importing the formBuilder. Consequently, without injecting it as a constructor dependency, the error occurred because 'group' could not be found in fb.group.

I share this in hopes that it may be beneficial to someone facing a similar issue.

The property 'name' is not found within the type 'FormGroup'

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to verify if the $compile process has finished?

How can I customize the visibility toggles for the password input field in Angular Material?

The Route.ts file does not export any HTTP methods

Contrasting Dependency Injection with Exporting Class Instances

How can I properly send a file to express-fileupload using a post request in Angular 9?

Issue in TypeScript where object properties may still be considered undefined even after verifying using Object.values() for undefined values

Troubleshooting: Issue with Angular integration causing foreign key lookup failure in ABP Framework

The specified property is not found in the type 'IntrinsicAttributes & IntrinsicClassAttributes<DatePicker> & Readonly<{ children?: ReactNode; }>'

What is the best way to distinguish between administrators and regular users in an Angular project?

constructor parameters not being flagged as unused by no-unused-vars plugin

custom field component for react-hook-form

The field 'password' is not found in the 'User' array type

What is the best way to populate an Angular Bootstrap Table Widget with data obtained from an API request?

What is the best way to retrieve unique column values using the LoopBack REST API?

Implementing a Name Interface in Typescript - A Step-by-Step Guide

The Angular Material Autocomplete component fails to show items upon upgrading the angular/material package to the newest version

Ways to retrieve form information from a POST request

Can you provide guidance on how to extract the ID from a Firebase reference in the "onCreate" or "onUpdate" triggers?

Change the object's data type while preserving the connection between keys and values

Utilizing the component within the template could potentially result in a cyclical dependency if it were to be imported