DEV Community

Thomson Mathews
Thomson Mathews

Posted on

Error: Cannot find control with name:

I am using Angular 18.
It is strange it cannot find first two controls in a formGroup

Html:
Image description

Errors:
Error: Cannot find control with name: 'field1'
Error: Cannot find control with name: 'field2'

Rest of field are okay and i can load data into those fields

Image description

Entire component.ts
import { Component } from '@angular/core';
import {ActivatedRoute, RouterModule} from '@angular/router';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { Book } from '../book.interface';
import { BookService } from '../book.service';

@Component({
selector: 'app-book-edit',
styleUrl: './book-edit.component.css',
template:
<form [formGroup]="editForm"(submit)='submitTask()'>
Field1 <input type='text' formControlName='field1'>
Field2 <input type='text' formControlName='field2'>
Field3 <input type='text' formControlName='field3'>
Field4 <input type='text' formControlName='field4'>
Field5 <input type='text' formControlName='field5'>
Field6 <input type='text' formControlName='field6'>
Field7 <input type='text' formControlName='field7'>
<button type='submit'> test </button>
</form>

})

export class BookEditComponent {
paramMap!: any;
editForm: FormGroup = new FormGroup({});
constructor(
private route: ActivatedRoute,
private bookService: BookService,
private formBuilder: FormBuilder
) { }

ngOnInit() {

// read query params
this.route.queryParamMap.subscribe(
(paramMap) => {
this.paramMap = paramMap;
});

//oninit method
this.bookService.getBook(
  this.paramMap.get('bookId'),

).subscribe((book: Book) => {
next:
this.editForm = this.formBuilder.group({
  field1 : [book.bookId,Validators.required],
  field2 : [book.title,Validators.required],
  field3 : [book.isbn13,Validators.required],
  field4 : [book.languageId,Validators.required],
  field5 : [book.numPages,Validators.required],
  field6 : [book.publicationDate,Validators.required],
  field7 : [book.publisherId,Validators.required],
});
console.log(book, 'res');
error: (e: string) => console.error(e)
Enter fullscreen mode Exit fullscreen mode

});
}

submitTask()
{
console.log(this.editForm.value)
}
}

Can anyone tell what am i doing wrong.

Top comments (0)