Error: create-product.component.html:1 ERROR TypeError: Cannot read properties of null (reading

Question

Error: create-product.component.html:1 ERROR TypeError: Cannot read properties of null (reading

'_syncPendingControls')

delete-product.component.ts:
ts
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ProductsService } from '../../services/products.service';
import { ModalService } from 'src/app/shared/services/modal.service';

@Component({
selector: 'app-delete-product',
templateUrl: './delete-product.component.html',
styleUrls: ['./delete-product.component.scss'],
})
export class DeleteProductComponent {
form: FormGroup = new FormGroup({
id: new FormControl<number>(0, [Validators.required]),
});

constructor(private productsService: ProductsService, private modalService: ModalService) {}

submit() {
this.productsService.delete(this.form.value.id)
.subscribe(() => this.modalService.confirmModal());
}

get id() {
return this.form.controls.id as FormControl;
}
}

delete-product.component.html
html
<form class="delete-product" [formGroup]="form" (ngSubmit)="submit()">
<input
type="text"
placeholder="Product id"
class="delete-product__input"
formControlName="id"
appFocus
/>
<p class="delete-product__error" *ngIf="id.errors?.required && id.touched">This field is required</p>
<button class="delete-product__button" type="submit">Delete</button>
</form>

github repository: https://github.com/Khnykin-Artem/Product