Angular Form not showing in browser

Question

Hi I'm trying to create a form where you can update data choosen from a table. Everything works in my app, I can get all the data, create new or delete but the edit form is simply not showing in the browser (not only the data, but the input fields as well).

here is my code:

update.ts:

export class UpdateComponent {

  editForm!: FormGroup;

  constructor(private route: ActivatedRoute, private router: Router, private filmService: FilmService, private formBuilder: FormBuilder) { }

  ngOninit() {
    console.log("ngoninit called")
    this.editForm = this.formBuilder.group({
      id: [],
      nameOfFilm: ['', Validators.required],
      length: ['', Validators.required],
      director: ['', Validators.required]
    });
 this.filmService.getFilmsById(this.editForm.value).subscribe(data => {
  this.editForm.patchValue(data);
 })

  }

  update() {
    this.filmService.updateFilm(this.editForm.value).subscribe({
      next: (data) => {
        this.router.navigate(["/home"]);
      },
      error: (err) => {
        console.log(err);
      }
    })
  }
}

and my update.html:

<p-card header="You can add new films to the list here" class="flex">
  <div class="container">
    <form [formGroup]="editForm" *ngIf="editForm" (ngSubmit)="update()">
      <div class="p-float-label">
        <input type="text" name="nameOfFilm" formControlName="nameOfFilm" pInputText class="form-control"
          id="txtNameOfFilm" />
        <label for="txtNameOfFilm" class="form-label">Title</label>
        <!-- <small class="p-error block" *ngIf="
        editForm.get('nameOfFilm')?.invalid && editForm.get('nameOfFilm')?.dirty">
          Title is required</small> -->
      </div>
      <div class="p-float-label">
        <input type="text" name="length" formControlName="length" pInputText class="form-control" id="txtLength" />
        <label for="txtLength" class="form-label">Length</label>
        <!-- <small class="p-error block" *ngIf="
        editForm.get('length')?.invalid && editForm.get('length')?.dirty">
          Length is required</small> -->
      </div>
      <div class="p-float-label">
        <input type="text" name="director" formControlName="director" pInputText class="form-control"
          id="txtDirector" />
        <label for="txtDirector" class="form-label">Director</label>
        <!-- <small class="p-error block" *ngIf="
        editForm.get('director')?.invalid && editForm.get('director')?.dirty">
          Director is required</small> -->
      </div>
      <button pButton pRipple type="button" icon="pi pi-check" class="btn btn-primary"></button>
      <button pButton pRipple type="button" icon="pi pi-times" routerLink="/home" class="btn btn-primary"></button>
    </form>
  </div>
</p-card>

Why is that nothing shows up in the browser just the card with the header text?

Answer 1

Its ngOnInit not ngOninit.

The lifecycle method is written wrong. Thats why the logic it contains its not triggered.

Use the lifecycle methods interfaces that angular provides to avoid these typos. https://angular.io/guide/lifecycle-hooks