Angular Form not showing in browser-CodePudding

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" >
  <div >
    <form [formGroup]="editForm" *ngIf="editForm" (ngSubmit)="update()">
      <div >
        <input type="text" name="nameOfFilm" formControlName="nameOfFilm" pInputText 
          id="txtNameOfFilm" />
        <label for="txtNameOfFilm" >Title</label>
        <!-- <small  *ngIf="
        editForm.get('nameOfFilm')?.invalid && editForm.get('nameOfFilm')?.dirty">
          Title is required</small> -->
      </div>
      <div >
        <input type="text" name="length" formControlName="length" pInputText  id="txtLength" />
        <label for="txtLength" >Length</label>
        <!-- <small  *ngIf="
        editForm.get('length')?.invalid && editForm.get('length')?.dirty">
          Length is required</small> -->
      </div>
      <div >
        <input type="text" name="director" formControlName="director" pInputText 
          id="txtDirector" />
        <label for="txtDirector" >Director</label>
        <!-- <small  *ngIf="
        editForm.get('director')?.invalid && editForm.get('director')?.dirty">
          Director is required</small> -->
      </div>
      <button pButton pRipple type="button" icon="pi pi-check" ></button>
      <button pButton pRipple type="button" icon="pi pi-times" routerLink="/home" ></button>
    </form>
  </div>
</p-card>

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

CodePudding user response：

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