Javascript 是什么原因导致在Angular 9应用程序中找不到名称错误的控件？

我正在使用Angular 9和PHP开发“任务”应用程序。我在尝试用数据预填充更新表单时遇到一个

找不到名为“

的控件”错误

表单如下所示：

<form [formGroup]="updateTask" name="edit_task_form">
  <mat-form-field appearance="standard">
    <mat-label>Title</mat-label>
    <input matInput placeholder="Title" formControlName="title" placeholder="Title">
  </mat-form-field>
  <mat-form-field appearance="standard">
    <mat-label>Short Description</mat-label>
    <input matInput placeholder="Short description" formControlName="short-description" placeholder="Short Description">
  </mat-form-field>
  <mat-form-field>
    <mat-label>Category</mat-label>
    <mat-select formControlName="tags">
      <mat-option *ngFor="let category of categories" [value]="category.id">{{category.name | titlecase}}</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field appearance="standard">
    <mat-label>Full Description</mat-label>
    <textarea matInput formControlName="full-description" placeholder="Full Description"></textarea>
  </mat-form-field>
  <div class="text-center">
    <button mat-flat-button type="submit" color="accent" [disabled]="updateTask.pristine || updateTask.invalid">Update</button>
  </div>
</form>

[{
   "taskId":"5eb45c2738ae2549000ddb0a",
   "key":"title",
   "data":"Lorem ipsum dolor"
},
{
   "taskId":"5eb45c2738ae2549000ddb0a",
   "key":"short-description",
   "data":"Lorem ipsum dolor sit amet, consectetur adipisicing elit"
},
{
   "taskId":"5eb45c2738ae2549000ddb0a",
   "key":"full-description",
   "data":"Reprehenderit aperiam unde distinctio, fuga magnam asperiores laboriosam expedita fugiat numquam rerum debitis temporibus dolores."
}] 

我试图从中获取任务信息的

formInfo

数组如下所示：

<form [formGroup]="updateTask" name="edit_task_form">
  <mat-form-field appearance="standard">
    <mat-label>Title</mat-label>
    <input matInput placeholder="Title" formControlName="title" placeholder="Title">
  </mat-form-field>
  <mat-form-field appearance="standard">
    <mat-label>Short Description</mat-label>
    <input matInput placeholder="Short description" formControlName="short-description" placeholder="Short Description">
  </mat-form-field>
  <mat-form-field>
    <mat-label>Category</mat-label>
    <mat-select formControlName="tags">
      <mat-option *ngFor="let category of categories" [value]="category.id">{{category.name | titlecase}}</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field appearance="standard">
    <mat-label>Full Description</mat-label>
    <textarea matInput formControlName="full-description" placeholder="Full Description"></textarea>
  </mat-form-field>
  <div class="text-center">
    <button mat-flat-button type="submit" color="accent" [disabled]="updateTask.pristine || updateTask.invalid">Update</button>
  </div>
</form>

[{
   "taskId":"5eb45c2738ae2549000ddb0a",
   "key":"title",
   "data":"Lorem ipsum dolor"
},
{
   "taskId":"5eb45c2738ae2549000ddb0a",
   "key":"short-description",
   "data":"Lorem ipsum dolor sit amet, consectetur adipisicing elit"
},
{
   "taskId":"5eb45c2738ae2549000ddb0a",
   "key":"full-description",
   "data":"Reprehenderit aperiam unde distinctio, fuga magnam asperiores laboriosam expedita fugiat numquam rerum debitis temporibus dolores."
}] 

行

console.log（task.key+：“+task.data）

正确输出：

title: Lorem ipsum dolor
short-description: Lorem ipsum dolor sit amet, consectetur adipisicing elit
full-description: Reprehenderit aperiam unde distinctio, fuga magnam asperiores laboriosam expedita fugiat numquam rerum debitis temporibus dolores.

但是，表单字段没有填充数据，我在控制台中遇到错误：

Cannot find control with name: 'title'

依此类推，对于

formInfo

数组中的每个对象

我错过了什么

---

更新： 我简化了应填充表单的代码：

currentTask: any = {};

constructor(private _apiService: ApiService, private _formBuilder: FormBuilder, private _formControl: FormControl, private _sharedService: SharedService) {}

updateTask = this._formBuilder.group({});

ngOnInit(): void {

    this._apiService.getTaskInfo().subscribe(res => {
        this.currentTask = res;
        let formInfo = this.currentTask.info;

        formInfo.forEach(function(item) {
            console.log(item.key + ": " + item.data);
            this.updateTest.addControl(item.key, this._formBuilder.control(item.data, Validators.required));
        }, this);
    });

}

---

我得到一个

NullInjectorError:R3InjectorError（AppModule）[FormControl->FormControl->FormControl]：NullInjectorError:FormControl没有提供程序borwser中的错误。
在ngOnIt方法中添加以下代码

this.updateTask=new FormGroup({
      title: new FormControl(),
      short-description: new FormControl(),
      full-description: new FormControl()
    });

在ngOnIt方法中添加以下代码

this.updateTask=new FormGroup({
      title: new FormControl(),
      short-description: new FormControl(),
      full-description: new FormControl()
    });

要在模板中使用formControlName属性，updateTask FormGroup中必须有一些FormControls

实际上，这一行无法工作，因为您尝试使用
get
方法进行检索，这是一个不存在的FormControl：

this.updateTask.get(task.key).setValue(task.data);

我建议您在构造函数中实例化FormBuilder实例，以最小化样板文件：

constructor(private fb: FormBuilder){}

创建您的表单组：

updateTask = this.fb.group({});

注意，这一行只将updateTask变量键入FormGroup，但不会使其成为FormGroup类的实例：

然后重新使用foreach循环创建所有表单控件：

formInfo.forEach((task) => {
  this.updateTask.addControl(task.key, this.fb.control(task.data))
})

从那时起，您就不应该再出现控制台错误了

下面是一个简化且有效的StackBlitz，可帮助您解决问题：
若要在模板中使用formControlName属性，必须在updateTask FormGroup中包含一些FormControls

实际上，这一行无法工作，因为您尝试使用
get
方法进行检索，这是一个不存在的FormControl：

this.updateTask.get(task.key).setValue(task.data);

我建议您在构造函数中实例化FormBuilder实例，以最小化样板文件：

constructor(private fb: FormBuilder){}

创建您的表单组：

updateTask = this.fb.group({});

注意，这一行只将updateTask变量键入FormGroup，但不会使其成为FormGroup类的实例：

然后重新使用foreach循环创建所有表单控件：

formInfo.forEach((task) => {
  this.updateTask.addControl(task.key, this.fb.control(task.data))
})

从那时起，您就不应该再出现控制台错误了

这里有一个简化且有效的StackBlitz，可以帮助您解决问题：
您在尝试设置值之前是否创建了FormGroup？@BojanKogoj是的。行
updateTask:FormGroup
是类中的第二行。您只需声明updateTask:FormGroup，就需要定义其controllers@doublezofficial我该怎么做？@RazvanZamfir请看下面我的答案。在设置值之前，您是否创建了FormGroup？@Bojankogj是的。行
updateTask:FormGroup
是类中的第二行。您只需声明updateTask:FormGroup，就需要定义其controllers@doublezofficial我该怎么做？@RazvanZamfir请看下面我的答案，改为：
this.updateTask=this.\u formBuilder.group（this.formFields）
，我认为这已经足够了。我不认为这会创建控件。使用
简短描述
会显示为不正确，并带有一条红色的曲线。如果我使用
short\u description
，它就会消失，但我必须保留原始版本。我使用的是：
this.updateTask=this.\u formBuilder.group（this.formFields）
，我认为这已经足够了。我认为这不会创建控件。使用
short description
显示为不正确，带有红色的曲线。如果我使用
short\u description
，它就会消失，但我必须保留原件。我已经用我拥有的更相关的代码完成了我的问题。请看一看，我想我已经做了
updateTask=this.fb.group（{}）
但是错了。是的，你已经做了
updateTask=this.fb.group（{}）
，但是你试图用
this.formFields
中包含的默认值来构造你的表单组。这个变量里面是什么？在我的代码中是这样的：`private formFields:TaskForm={'title'：[null，Validators.required]，'short description'：[null，Validators.required]，'full description'：[null，Validators.required]，}`我无法在控制台中看到它，因为我有此错误，并且在它之后没有其他可见的内容：
NullInjectorError:R3InjectorError（AppModule）[FormControl->FormControl->FormControl]：NullInjectorError:没有FormControl的提供程序问题在于，formFields变量不包含FormControls，必须添加FormControls构造函数。您必须至少更改formFields变量，使其如下所示：
private formFields:TaskForm={title:this.fb.control（null，Validators.required），简短描述：this.fb.control（null，Validators.required），完整描述：this.fb.control（null，Validators.required）}我已经用我拥有的更相关的代码完成了我的问题。请看一看，我想我已经做了
updateTask=this.fb.group（{}）
但是错了。是的，你已经做了
updateTask=this.fb.group（{}）
，但是你试图用
this.formFields
中包含的默认值来构造你的表单组。这个变量里面是什么？在我的代码中是这样的：`private formFields:TaskForm={'title'：[null，Validators.required]，'short description'：[null，Validators.required]，'full description'：[null，Validators.required]，}`我无法在控制台中看到它，因为我有此错误，并且在它之后没有其他可见的内容：
NullInjectorError:R3InjectorError（AppModule）[FormControl->FormControl->FormControl]：NullInjectorError:没有FormControl的提供程序这是问题所在