'Angular 13 Property does not exist on type 'FormGroup'

Good evening everyone!

I'm having a few issues with Angular lately. I'm new to Angular, so I'm encountering lots of errors here and there. Thankfully, I've got this beautifully big community to bring some knowledge.

I'm on the stage of validating forms in Angular.

I'm trying to make a validation through the view (html file) and component (component file).

These are the problems I'm having atm:

  • My field validations don't seem to work, as when I click the submit button of my form, it automatically skips any possible validation 🤣
  • While I can't validate in the component, I cannot even make a custom validation inside the form with ngIf* (I'm using a Material Design style library)

I've tried everything and couldn't make it to work.

These are my files:

add-project.component.html:

<div class="new-project">
    <mat-toolbar>
        <span>New Project</span>
    </mat-toolbar>
    <form [formGroup]="projectForm" (ngSubmit)="onSubmit()">
    <mat-card>
        <mat-card-content>
            <p>
                <mat-form-field appearance="outline">
                    <mat-label>Title</mat-label>
                    <input formControlName="title" matInput required placeholder="Title">
                    <mat-error *ngIf="projectForm.title.required">Title is required</mat-error>
                </mat-form-field>
            </p>
            <p>
                <mat-form-field appearance="outline">
                    <mat-label>Description</mat-label>
                    <textarea rows="6" formControlName="description" matInput placeholder="Description"></textarea>
                </mat-form-field>
            </p>
            <p>
                <mat-form-field appearance="outline">
                    <mat-label>Access Code</mat-label>
                    <input id="accessCode" formControlName="accessCode" matInput placeholder="Access Code">
                </mat-form-field>
            </p>
        <!-- FORM CONTENT -->
        </mat-card-content>
        <mat-card-actions>
            <button mat-raised-button color="primary" type="submit">Create Project</button>
         <!-- REGISTER BUTTON -->
        </mat-card-actions>
    </mat-card>
    </form>
</div>

add-project.component.ts

import { Project } from 'src/app/models/project.model';
import { ProjectService } from 'src/app/services/project.service';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Component, OnInit, NgZone } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-add-project',
  templateUrl: './add-project.component.html',
  styleUrls: ['./add-project.component.css']
})



export class AddProjectComponent implements OnInit {
  projectForm: FormGroup;
  
  constructor(
    public formBuilder: FormBuilder,
    private router: Router,
    private ngZone: NgZone,
    private project: ProjectService,
  ) { 
    this.projectForm = this.formBuilder.group({
      title: ['', [Validators.required, Validators.minLength(3)]],
      description: [''],
      accessCode: [''],
    })
  }
  ngOnInit() { }
  onSubmit(): any {
    if (this.projectForm.valid) {
        console.log('form submitted');
      } else {
        // validate all form fields
      
    this.project.create(this.projectForm.value)
    .subscribe(() => {
        console.log('User added successfully!')
        this.ngZone.run(() => this.router.navigateByUrl('/projects'))
      }, (err) => {
        console.log(err);
    });
  }
}
}

Can someone help me with these issues I'm having? I don't know what to do to continue, I've been blocked for a few days without resolving it.

Thank you very much guys!

Edit with @Misha Mashina comments (11/01/2022 21:46):

I'm getting this few errors now:

enter image description here

javascripthtmlangularproperties


Solution 1:[1]

Ah so it's the Angular 13 change - I still haven't run into that difference :) Anyway, instead of:

<mat-error *ngIf="projectForm.controls.title.errors?.required">

and

<mat-error *ngIf="projectForm.controls.title.errors?.minLength">

you now have to do:

<mat-error *ngIf="projectForm.controls['title'].errors?.['required']">

and

<mat-error *ngIf="projectForm.controls['title'].errors?.['minlength']">

Note the lowercase minlength

Solution 2:[2]

Can you, please, share a live example? It would help to understand what's going on. You can use stackblitz for example

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Derek
Solution 2 Umbe Bagna

Related Questions