CODEWITHSUNDEEP
angulartypescriptangular6angular7angular4-forms
Lucas Miranda
Lucas Miranda

Reputation: 133

Property 'nome' does not exist on type 'FormGroup'

I have a angular app and i'm having some problem in my form validation via ReactiveForms, i'm having the following error:

ng serve 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="Nome" formControlName="nome" required>
  <mat-error *ngIf="dadosForm.get('nome').dirty || dadosForm.get('nome').touched">
    O campo nome deve ser preenchido</mat-error>
</mat-form-field> <br>

<mat-form-field style="width:100%" class="full-width">
  <input matInput placeholder="Empresa" formControlName="empresa" required>
  <mat-error
    *ngIf="dadosForm.get('empresa').dirty || dadosForm.get('empresa').touched">
    O campo empresa deve ser preenchido</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="Telefone para Contato" required />
  <mat-error
    *ngIf="dadosForm.get('telefone').dirty || dadosForm.get('telefone').touched">
    O campo telefone deve ser preenchido</mat-error>
</mat-form-field> <br>

<mat-form-field style="width:100%" class="full-width">
  <mat-label>Produto Desejado</mat-label>
  <mat-select matInput formControlName="assunto" required>
    <mat-optgroup *ngFor="let categoria of produtos" [label]="categoria.key">
      <mat-option *ngFor="let produto of categoria.value" [value]="produto">
        {{produto}}
      </mat-option>
    </mat-optgroup>
  </mat-select>
  <mat-error
    *ngIf="dadosForm.get('assunto').dirty || dadosForm.get('assunto').touched">
    O campo assunto deve ser preenchido</mat-error>
</mat-form-field><br>

<mat-form-field style="width:100%" class="full-width">
  <textarea matInput placeholder="Mensagem" formControlName="mensagem" required></textarea>
  <mat-error
    *ngIf="dadosForm.get('mensagem').dirty || dadosForm.get('mensagem').touched">
    O campo mensagem deve ser preenchido</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(mensagem)">Enviar</button>
</div>

</form>

contact.component.ts

  dadosForm = 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])
  });

Upvotes: 3

Views: 32949

Answers (4)

Wahab Shah
Wahab Shah

Reputation: 2266

If someone comes across this error, and they are doing something similar as I was so it may help them. So I was getting the following error

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

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

And the reason for getting that error was that I initialized the form but I did not import the formBuilder. So without injecting it as a dependency in constructor I was getting this error since it was unable to find 'group' in fb.group.

Hope it will help someone.

Upvotes: 0

David Riscanevo
David Riscanevo

Reputation: 33

I just get that error and I did this, for example, in your first input:

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

Just change validation within the *ngIf:

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

I'm using Angular 10+ with the same input template as you, I'm not using dirty and touched, so, for a unique validation you can use just dadosForm.invalid within *ngIf and get the unique message error you're validating.

Equivalent:

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

Another equivalent:

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

Upvotes: 2

manikandan
manikandan

Reputation: 815

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

In ts file

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

Upvotes: 4

Gurpreet Singh
Gurpreet Singh

Reputation: 3121

Use form builder FormBuilder for validations

First import these dependencies

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

Create variable for form group

formGroupName: FormGroup;

constructor(private _formBuilder: FormBuilder) { }

Set validations code in ngOnInit method

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]
});

Try with this.

Upvotes: 1

Related Questions