Angular - ngOnInit()

Question

Is it possible to access both this.droneForm and this.service? At the moment the one on top is taking priority

ngOnInit(){
    this.droneForm = this.formBuilder.group({
      serialNumber:['', [Validators.required]],
      modelNumber:['', [Validators.required]],
      brand:['', [Validators.required]],
      model:['', [Validators.required]],
      ownerIDNumber:['', [Validators.required,Validators.pattern("[0-9]+[A-Za-z]")]],
      ownerName:['', [Validators.required]],
      ownerSurname:['', [Validators.required]],
      ownerContactNumberCountryCode:['', [Validators.required]],
      ownerContactNumber:['', [Validators.required,Validators.minLength(8)]],
      ownerEmail:['', [Validators.required,Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$")]]
    }
    );
    this.service.getDronebyId(this.droneid)?.subscribe(detailedDrone => {
      this.drone = detailedDrone;
  })
}

Answer 1

Assuming that what you need is to place the values of the detailedDrone into the form, all you need is to call patchValue on the form once the services responds:

(...)

this.service.getDronebyId(this.droneid)?.subscribe(detailedDrone => {
  this.drone = detailedDrone;
  this.droneForm.patchValue(detailedDrone)
})

for that to work, the droneForm controls must have the same names as the properties of detailedDrone