Angular - How to resolve object is possibly null for a FormGroup

In Angular-15 project I have this code in the component.ts:

component.ts:

export class CountryCreateComponent {

  countriesDatas: any[] = [];
  selectedCountryCode: string = '';
  selectedCountryName: string = '';
  createCountryForm!: FormGroup;

  constructor(
    private fb: FormBuilder,
    private toastr: ToastrService
  ) {
  }

  createCountry() {
    this.createCountryForm = this.fb.group({
      CountryCode: ['', [Validators.required]],
      CountryName: [''],
    });
  }

createValidate() {
  if (!this.createCountryForm.valid) {
    this.createCountryForm.markAllAsTouched();
    return;
  }
}
get fc() {
  return this.createMerchantForm.controls;
}

  constructor(
    private fb: FormBuilder
  ) {}

  ngOnInit(): void {;

  }

  onCountryChange() {
    const selectedCountry = this.countriesDatas.find(selectedCountryCode => {
      return selectedCountryCode.country_code === this.form.get('countryCode').value;
    });

    if (selectedCountry) {
      this.createCountryForm.get('countryCode').setValue(selectedCountryCode.country_code);
      this.createCountryForm.get('countryName').setValue(selectedCountryName.country_name); 
   }
  }
 }
}

However, I got this error: object is possibly null

Then createCountryForm is highlighted in this.createCountryForm.get

How do I resolve this?

You can use the "nullish coalescing operator" (??) or optional chaining (?.) to handle the possibility of the variable being null.

 this.createCountryForm.get('countryCode') ?? {value:''/*default Value*/}.value 

or

 this.createCountryForm.get('countryCode')?.value

For Detailed Explanation why formControl can be null check here

Since you don't use a typed form, this this.createCountryForm.get('countryCode') (and the other too) can lead to a null object. Put a ! after it: this.createCountryForm.get('countryCode')!.