Property 'nome' does not exist on type 'FormGroup'
Solution 1
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>
Solution 2
<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; }
Solution 3
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.
Related videos on Youtube
Lucas Miranda
Updated on June 04, 2022Comments
-
Lucas Miranda almost 2 years
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]) });
-
Ala Abid almost 5 yearsmake a stack blitz example
-
Reza almost 5 yearsI don't see any obvious issue in your code, please make a stackblitz for it
-
The Head Rush almost 5 yearsLooks like your template renders before the form constructs. You probably need to add
*ngIf=dadosForm
to the<form>
element. -
Lucas Miranda almost 5 years@ala I've tried to create a Stackblitz, but stackblitz don't shows all the errors. And there's no error related to the form.
-
Lucas Miranda almost 5 years@TheHeadRush, i've tried to do the *ngIf, but no lucky with this.
-
The Head Rush almost 5 yearsDid you catch the mistake in my suggested
*ngIf
? It should be*ngIf="dadosForm"
. If so, we need to see the form instantiation method and how/where that method is called. -
Ala Abid almost 5 yearsSo everything works fine in stackblitz?
-
-
David Riscanevo almost 3 yearsI would like to know if there is another way to do this.