无法找到具有最后一个表单控件名称的控件

Question

我有一个小项目要在我们的 nas 上显示图像。 我用的是角度17。 在主页上我有 3 个 mat-form-fields。由于某种原因，当我添加树形表单字段的最后一个时，我收到错误 - 错误错误：找不到名称为“numberOfPicture”的控件。

我发现，无论我添加什么类型的输入作为最后一个输入，当我将 formControlName 添加到最后一个输入时，无论是日期选择器、常规文本还是选择器，我都会遇到相同的错误。

我不知道如何在 stackblitz 或类似工具中重现它，抱歉。

我已经清理了代码，仅显示如何重现错误。

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 我可能有很多导入，如果这就是导致问题的原因，请告诉我。

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

}

我已经在没有 css 的情况下用 och 尝试过这个。

以下是完整的控制台日志。我知道它不太容易阅读，但这是我能做的最好的事情。

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

如果您需要更多信息，我会尽力为您提供更多信息。

预先感谢您的帮助。

Answer 1

我认为问题似乎是您的表单控件名称中的拼写错误。在表单组中，您已将控件定义为

numberOfPictures

，但在模板中，您尝试使用

numberOfPicture

访问它。名称应该完全匹配。 所以你的 html 应该看起来像：

<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>

此外，您还必须在打字稿中更改功能：

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

希望对您有帮助。