类型“string”无法分配给类型“FormGroup<any>”Angular 14 错误

Question

我是一名初学者 Angular 开发人员，我正在使用本教程构建一个 todoList 应用程序 -> https://www.youtube.com/watch?v=WTn2nVphSl8 它是使用 Angular 13 完成的。我遇到错误的是在 todo.component.html 中，它看起来像这样

<mat-card class="mt-3 ">
                    <form [ formGroup ] = "todoForm" >
                            <mat-form-field appearance="outline" style="width: 100%; ">
                              <mat-label>Task Name</mat-label>
                              <input formControlName="item" matInput placeholder="Placeholder">
                              <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
                              <mat-hint>Add task name</mat-hint>
                              
                            </mat-form-field>
                            <button mat-stroked-button color="primary" > Add</button>
                    </form>
                </mat-card>

我的 todo.component.ts 看起来像这样

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators} from '@angular/forms';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.scss']
})
export class TodoComponent implements OnInit {
  todoForm !: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.todoForm = this.fb.group({
      item : ['', Validators.required],
    })
  }

}

当我研究时，我发现很多反应式表单是使用表单控件实现的，我尝试了该方法，但它不起作用。错误保持不变。我怎样才能最好地解决这个问题。我是否在 todo.component.html 中遗漏了某些内容，或者我应该检查在 todo.component.ts 中定义表单的方式？

Answer 1

看起来空格在某种程度上导致绑定无法按预期工作。 删除方括号之间的空格，即

[formGroup]

而不是

[ formGroup ]

，它应该按预期工作。

  <form [formGroup] = "todoForm" >
    <!-- Rest of your code -->
  </form>

Answer 2

以下情况也可能会出现此错误：

你必须写：foncontrolName='password'！

Answer 3

使用 UntypedFormGroup 作为表单组类型