Error: Cannot find control with name:

Thomson Mathews — Fri, 14 Jun 2024 13:51:25 +0000

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

Html:

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

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)

});
}

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

Can anyone tell what am i doing wrong.

DEV Community: Thomson Mathews

Error: Cannot find control with name: