我究竟做错了啥？角垫形式场

Posted 2023-03-13

【中文标题】我究竟做错了啥？角垫形式场

【英文标题】：What am I doing wrong? Angular mat-form-field我究竟做错了什么？角垫形式场

【发布时间】：2021-09-22 05:17:11

【问题描述】：

我在网站控制台上遇到了这个错误。在构建应用程序时我没有错误：

core.js:6210 ERROR Error: mat-form-field must contain a MatFormFieldControl.
    at getMatFormFieldMissingControlError (form-field.js:227)
    at MatFormField._validateControlChild (form-field.js:712)
    at MatFormField.ngAfterContentInit (form-field.js:519)
    at callHook (core.js:2573)
    at callHooks (core.js:2542)
    at executeInitAndCheckHooks (core.js:2493)
    at refreshView (core.js:9521)
    at refreshEmbeddedViews (core.js:10605)
    at refreshView (core.js:9504)
    at refreshComponent (core.js:10651)

我的html：

<form [formGroup]="rowForm">
  <div formArrayName="rows">
    <div *ngFor="let rows of getControls(); let i=index"  [formGroupName]="i">

      <mat-checkbox class="example-margin" formControlName="checkbox2"  name="checkbox2" (click)="toggleInput()">Show hidden option!</mat-checkbox>

      <mat-form-field class="example-full-width">
        <input matInput placeholder="Input1" formControlName="input1"  name="input1" required>
      </mat-form-field>

      <mat-form-field class="example-full-width">
        <input matInput placeholder="Input2" formControlName="input2"  name="input2" required>
      </mat-form-field>

      <mat-form-field class="example-full-width">
        <input matInput placeholder="Input3" *ngIf="showInput" formControlName="input3"  name="input3" required>
      </mat-form-field>

      <button mat-button color="primary" *ngIf="rowForm.controls.rows.controls.length > 1" (click)="deleteRow(i)" class="btn btn-danger">Delete Button</button>
    </div>
  </div>
  
  <button mat-button color="primary" (click)="addNewRow()" class="btn btn-primary">Add new Row</button><br>

</form>

我的模块文件：

import  AppRoutingModule  from './app-routing.module';
import  AppComponent  from './app.component';
import  RegisterFormComponent  from './components/register-form/register-form.component';

import  NgModule  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  MatCardModule  from '@angular/material/card';
import  MatButtonModule  from '@angular/material/button';
import  FormsModule, ReactiveFormsModule  from '@angular/forms';
import  BrowserAnimationsModule  from '@angular/platform-browser/animations';
import  MatFormFieldModule  from '@angular/material/form-field';
import  MatInputModule  from '@angular/material/input';
import  NgSelectModule  from '@ng-select/ng-select';
import  MatCheckboxModule  from '@angular/material/checkbox';
import  RowComponent  from './components/row/row.component';

@NgModule(
  declarations: [
    AppComponent,
    RegisterFormComponent,
    RowComponent
  ],
  
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatCardModule,
    MatButtonModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    FormsModule,
    ReactiveFormsModule,
    NgSelectModule,
    MatCheckboxModule,
  ],

  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

我做错了什么？提前致谢！

不重要 我的问题的最小长度的更多原因 - abcdefghijklmnoprstuwxyz - abcdefghijklmnoprstuwxyz - abcdefghijklmnoprstuwxyz - abcdefghijklmnoprstuwxyz

【问题讨论】：

您是否在 Modules Imports 数组中添加了 MatFormFieldModule 和 MatInputModule？

是的，我有

【参考方案1】：

我想你忘了导入输入模块

import  MatInputModule  from '@angular/material/input'; 

MatInput 扩展自 MatFormFieldControl

【讨论】：

我有。我查过了。

组件的名称是什么，在哪个模块中？

【参考方案2】：

错误是因为您有一个 mat-form-field，但里面有 no 输入/选择...

你有

//WRONG
<mat-form-field class="example-full-width">
        <input matInput placeholder="Input3" 
               *ngIf="showInput" formControlName="input3"  name="input3" required>
</mat-form-field>

您应该将影响所有 mat-form-field 的*ngIf 放入

//OK
<mat-form-field *ngIf="showInput"  class="example-full-width">
        <input matInput placeholder="Input3" formControlName="input3"  name="input3" required>
</mat-form-field>