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

Question

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

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

以下是我所做的更改。

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