Currently, I am developing a "Tasks" application using Angular 9 and PHP. I encountered a
Error: Cannot find control with name: <control name>Here is how the form is structured:
<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>
In my component file, I have included:
I am importing the following modules at the beginning:
import { Component, OnInit } from '@angular/core';
import * as _ from "lodash";
import {FormGroup, FormBuilder, Validators} from "@angular/forms";
import {SharedService} from "../../../core/services/shared-service.service";
import {ApiService} from "../../../core/http/api.service";
taskId: string;
updateTask: FormGroup;
currentTest:any = {};
constructor(private _apiService: ApiService, private _formBuilder: FormBuilder, private _formControl: FormControl, private _sharedService: SharedService) {}
ngOnInit(): void {
this.categories = [
{
id: 1, name: "Category 1"
},
{
id: 2, name: "Category 2"
},
{
id: 3, name: "Category 3"
}
];
this.updateTask = this._formBuilder.group(this.formFields);
this._apiService.getTaskInfo().subscribe(res => {
this.Task = res;
let formInfo = this.Task.info;
formInfo.forEach(function(task, index){
console.log(task.key + ": " + task.data);
this.updateTask .get(task.key).setValue(task.data);
}, this)
});
}
The array formInfo that contains task information looks like this:
[{
"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."
}]
Although the line
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.
However, the form fields remain empty, leading to console errors such as:
Cannot find control with name: 'title'
This error persists for each object in the formInfo array.
What am I overlooking?
UPDATE:
I have made changes to the code responsible for populating the form:
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);
});
}
A browser error
NullInjectorError: R3InjectorError(AppModule)[FormControl -> FormControl -> FormControl]: NullInjectorError: No provider for FormControl!