角度意外错误：无法将 FormControl 绑定到输入

Posted

技术标签:

【中文标题】角度意外错误：无法将 FormControl 绑定到输入【英文标题】：Angular unexpected error: Cant bind FormControl to input 【发布时间】：2021-04-26 00:40:48 【问题描述】：

我正在寻求一些帮助以尝试清除，这都是常见错误。我在我的应用程序的两个不同部分中使用表单，并且表单在一个部分中完美运行，但在另一部分中却不行。我已经导入了ReactiveFormsModule 和FormsModule。

resolution.module.ts

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';

import  ResolutionRoutingModule  from './resolution-routing.module';
import  ResolutionComponent  from './resolution/resolution.component';
import  ResolutionDetailComponent  from './resolution-detail/resolution-detail.component';
import  ResolutionListComponent  from './resolution-list/resolution-list.component';
import  NewResolutionComponent  from '../../forms/new-resolution/new-resolution.component';
import  MatFormFieldModule  from '@angular/material/form-field';
import  FormsModule, ReactiveFormsModule  from '@angular/forms';
import  MatDialogModule  from '@angular/material/dialog';
import  MatInputModule  from '@angular/material/input';
import  MatSelectModule  from '@angular/material/select';
import  MatCardModule  from '@angular/material/card';
import  ResolutionEditComponent  from '../../forms/resolution-edit/resolution-edit.component';


@NgModule(
  declarations: [ResolutionComponent,
ResolutionDetailComponent,
ResolutionListComponent,
NewResolutionComponent,
ResolutionEditComponent],
  imports: [
    CommonModule,
    ResolutionRoutingModule,
    MatFormFieldModule,
    ReactiveFormsModule,
    MatDialogModule,
    FormsModule,
    MatInputModule,
    MatSelectModule,
    MatCardModule
  ]
)
export class ResolutionModule

在组件NewResolutionComponent 中，我的表单按预期工作，我没有收到任何错误。

new-resolution-component.html(sn-p: 我只加入了一个输入函数)

<form (ngSubmit)='onSubmit()'[formGroup]='ResolutionFormGroup'>
<mat-form-field>
        <mat-label>Title</mat-label>
        <input [formControl]='TitleControl' matInput placeholder="Title" required/>
</mat-form-field>
....
</form>

new-resolution.component.ts

import  Component, OnInit  from '@angular/core';
import  AbstractControl, FormControl, FormGroup, Validators  from '@angular/forms';
import  MatDialogRef  from '@angular/material/dialog';
import  AuthService  from '../../shared/services/auth.service';
import  ResolutionsService  from '../../shared/services/resolutions.service';

@Component(
  selector: 'app-new-resolution',
  templateUrl: './new-resolution.component.html',
  styleUrls: ['./new-resolution.component.scss']
)
export class NewResolutionComponent implements OnInit 
  uid: string
  category_id: string
  title: string
  description: string
  catId: string
  categoryList = []

  TitleControl: AbstractControl
  DescriptionControl: AbstractControl
  UserIdControl: AbstractControl
  CategoryControl: AbstractControl
  ResolutionFormGroup: FormGroup

  constructor(public as: AuthService,
    public rs: ResolutionsService,
    public dialog: MatDialogRef<NewResolutionComponent>)  

    userid: string
    
  ngOnInit(): void 
    this.ResInit()
  
  private ResInit() 
    this.ResolutionFormGroup = new FormGroup()
    this.ResolutionFormGroup.registerControl('id',(this.UserIdControl = new FormControl('this',[Validators.required])))
    this.ResolutionFormGroup.registerControl('category_id',(this.CategoryControl = new FormControl('',[Validators.required])))
    this.ResolutionFormGroup.registerControl('title',(this.TitleControl = new FormControl('SUPER',[Validators.required])))
    this.ResolutionFormGroup.registerControl('description',(this.DescriptionControl = new FormControl('',[Validators.required])))

这会产生所需的输出，其中我的输入有一个占位符“SUPER”。但是，当我尝试在另一个文件中重新创建它时，会得到完全不同的结果和错误。

resolution-edit.component.html(sn-p: 只显示一个输入，其他输入相同)

<form formGroup='ResEditGroup'>
    <mat-form-field>
        <mat-label>Title</mat-label>
        <input [FormControl]='TitleControl' matInput placeholder="Title" required/>
    </mat-form-field>

我注意到的第一件事是我的FormControl 周围有“[]”。如果我删除括号，我的代码将运行而不会给出错误： Can't bind to 'FormControl' since it isn't a known property of 'input'.

resolution-edit.component.ts

import  Component, Inject, OnInit  from '@angular/core';
import  AbstractControl, FormControl, FormGroup, Validators  from '@angular/forms';
import  MAT_DIALOG_DATA  from '@angular/material/dialog';

@Component(
  selector: 'app-resolution-edit',
  templateUrl: './resolution-edit.component.html',
  styleUrls: ['./resolution-edit.component.scss']
)
export class ResolutionEditComponent implements OnInit 
  ResEditGroup: FormGroup
  TitleControl: AbstractControl
  DescriptionControl: AbstractControl

  description: string
  title: string

  descriptionInput: string
  titleInput: string
  constructor(
    // @Inject(MAT_DIALOG_DATA) data
    ) 
    // this.descriptionInput = data.description
    // this.titleInput = data.title
   

  ngOnInit(): void 
    this.EditInit()
  
  EditInit(): void
    this.ResEditGroup = new FormGroup()
    this.ResEditGroup.registerControl('title',(this.TitleControl = new FormControl('SUPERBAD',[Validators.required])))  
    this.ResEditGroup.registerControl('description',(this.DescriptionControl = new FormControl('',[Validators.required])))

根据我的两个组件的比较，我希望第二个组件的输入显示一个占位符“SUPERBAD”，就像我在第一个组件中有一个占位符“SUPER”一样。但是，在这种情况下，除了我直接在 HTML 输入中声明的内容外，我没有得到占位符。 如何让我的第二个组件显示“SUPERBAD”？

【问题讨论】：

这能回答你的问题吗？ Can't bind to 'formControl' since it isn't a known property of 'input' - Angular2 Material Autocomplete issue 那不是，在那个答案中，他们正在谈论导入 ReactiveFormsModule 并将其应用于组件。我的resolution.module.ts 已经导入并声明了我的两个组件。 @PaulCarlson, [formControl] 需要一个 FormControl 变量，看那是[formControl]="control" 其中控制类似于control=newFormControl() 或者你有一个吸气剂get control()return this.myForm.get('control')。 formControlName="string" 没有 [ ] 并且是一个“字符串”。有时您会看到 [formControlName]="variable"，但这个“变量”是一个字符串。 【参考方案1】：

在我们尝试回答代码有什么问题之前，让我们尝试将其重构为更短的代码。

import  Component, Inject, OnInit  from '@angular/core';
import  FormBuilder, FormControl, FormGroup, Validators  from '@angular/forms';
import  MAT_DIALOG_DATA  from '@angular/material/dialog';

**resolution-edit.component.ts**

@Component(
  selector: 'app-resolution-edit',
  templateUrl: './resolution-edit.component.html',
  styleUrls: ['./resolution-edit.component.scss']
)
export class ResolutionEditComponent implements OnInit 
  resEditGroup = this.fb.group(
     title: ['SUPERBAD', [Validators.required]],
     description: ['', [Validators.required]]
  )
  constructor(
    private fb: FormBuilder,
    // @Inject(MAT_DIALOG_DATA) data
    ) 
    // this.descriptionInput = data.description
    // this.titleInput = data.title
   

  ngOnInit(): void

通过以上你可以拥有resolution-edit.component.html

<form [formGroup]='ResEditGroup'>
    <mat-form-field>
        <mat-label>Title</mat-label>
        <input formControlName='title' matInput placeholder="Title" required/>
    </mat-form-field>

以下是我所做的更改。

    我正在使用FormBuilder 来生成我的FormGroup。有了这个，我不需要使用new 创建一个新的FormFroup 和FormControl 更改为camelCase 重要我使用[] 绑定到FormGroup，对于控件我将formControlName 作为字符串传递。这实际上是您遇到问题的地方，因为您传入了 FormGroup 但未绑定到 ResEditGroup

【讨论】：

以上是关于角度意外错误：无法将 FormControl 绑定到输入的主要内容，如果未能解决你的问题，请参考以下文章

无法绑定到“formControl”，因为它不是“select”的已知属性

Angular Js 2 - 无法绑定到“formControl”，因为它不是“输入”的已知属性

在新的 Angular 2 表单中将 NgModel 绑定到 FormControl

无法绑定到“formControl”，因为它不是“输入”的已知属性 - Angular2 Material Autocomplete 问题

FormControl debounceTime 在角度 5（离子 3）中不可用

通过使用指令模糊和加载表单上的角度数字格式，也不应该格式化 formControl 数据