Cannot find control with name for last form control

Question

I have a small project to display images on our nas. I'm using angular 17. On the main page I have 3 mat-form-fields. For some reason when I add the last of the tree mat-form-fields I get the error - ERROR Error: Cannot find control with name: 'numberOfPicture'.

I discovered that no matter what type of input I add as the last input I get the same error when I add formControlName to the last input, be it a datepicker, regular text or select.

I have no clue to reproduce it in stackblitz or similar tools, sorry.

I have cleaned the code to only show how to reproduce the error.

gallery.component.html

<form [formGroup]="filterForm">

    <mat-form-field>
        <mat-label>Startdatum</mat-label>
        <input matInput [matDatepicker]="startPicker" formControlName="startDate">
        <mat-datepicker-toggle matIconSuffix [for]="startPicker"></mat-datepicker-toggle>
        <mat-datepicker #startPicker></mat-datepicker>
    </mat-form-field>

    <mat-form-field>
        <mat-label>Slutdatum</mat-label>
        <input matInput [matDatepicker]="endDateValue" formControlName="endDate">
        <mat-datepicker-toggle matIconSuffix [for]="endDateValue"></mat-datepicker-toggle>
        <mat-datepicker #endDateValue></mat-datepicker>
    </mat-form-field>

    <mat-form-field appearance="fill">
        <mat-label>Antal bilder</mat-label>
        <mat-select formControlName="numberOfPicture">
            <mat-option [value]="10">10</mat-option>
            <mat-option [value]="20">20</mat-option>
            <mat-option [value]="50">50</mat-option>
            <mat-option [value]="100">100</mat-option>
            <mat-option [value]="200">200</mat-option>
            <mat-option [value]="300">300</mat-option>
        </mat-select>
    </mat-form-field>
</form>

gallery.component.ts I probably have to many imports and if that is what causes the problem, please let me know.

import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { dialogIndata } from '../model/dialogIndata';
import { image } from '../model/image';
import { PhotoalbumService } from '../services/photoalbum.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';
import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';



@Component({
  selector: 'app-gallery',
  standalone: true,
  imports: [CommonModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatNativeDateModule,
    MatSelectModule,
    MatDatepickerModule,
    MatButtonModule

  ],
  templateUrl: './gallery.component.html',
  styleUrl: './gallery.component.css'
})
export class GalleryComponent {

  filterForm!: FormGroup;
  constructor(private fb: FormBuilder) { }


  get startDate() {
    return this.filterForm.get('startDate');
  }

  get endDate() {
    return this.filterForm.get('endDate');
  }

  get numberOfPicture() {
    return this.filterForm.get('numberOfPicture');
  }

  ngOnInit(): void {

    this.filterForm = this.fb.group({
      startDate: [''],
      endDate: [''],
      numberOfPictures: ['']
    });


    console.log(this.startDate);
    console.log(this.endDate);
    console.log(this.numberOfPicture);
  }

}

I have tried this with och without the css.

the following is the complete console log. I know its not that easy to read but it is the best I can do.

Object { _pendingDirty: false, _hasOwnPendingAsyncValidator: false, _pendingTouched: false, _onCollectionChange: _onCollectionChange()
, _parent: {…}, pristine: true, touched: false, _onDisabledChange: [], _rawValidators: null, _composedValidatorFn: null, … }
gallery.component.ts:61:12
Object { _pendingDirty: false, _hasOwnPendingAsyncValidator: false, _pendingTouched: false, _onCollectionChange: _onCollectionChange()
, _parent: {…}, pristine: true, touched: false, _onDisabledChange: [], _rawValidators: null, _composedValidatorFn: null, … }
gallery.component.ts:62:12
null gallery.component.ts:63:12
ERROR Error: Cannot find control with name: 'numberOfPicture'
    Angular 12
    GalleryComponent_Template gallery.component.html:20
    Angular 54
    <anonymous> main.ts:9
core.mjs:11760:22
Angular is running in development mode. core.mjs:29972:16
Ignoring unsupported entryTypes: largest-contentful-paint. core.mjs:33893:17
Source map error: Error: request failed with status 404
Resource URL: http://localhost:4200/@vite/client
Source Map URL: client.mjs.map

[vite] connected. client:324:21

If you need more info I'll do what I can to give you more.

Thanks in advance for any help.

Answer 1

I think the issue seems to be a typo in your form control name. In your form group, you've defined the control as numberOfPictures, but in your template, you're trying to access it using numberOfPicture. The names should match exactly. So your html should look like :

<mat-form-field appearance="fill">
    <mat-label>Antal bilder</mat-label>
    <mat-select formControlName="numberOfPictures"> <!-- Corrected the control name here -->
        <mat-option [value]="10">10</mat-option>
        <mat-option [value]="20">20</mat-option>
        <mat-option [value]="50">50</mat-option>
        <mat-option [value]="100">100</mat-option>
        <mat-option [value]="200">200</mat-option>
        <mat-option [value]="300">300</mat-option>
    </mat-select>
</mat-form-field>

Also in your typescript you have to change the function:

get numberOfPicture() {
    return this.filterForm.get('numberOfPictures');
  }

I hope that will help you.