Set Reactive form field value to null if user does not enter input

I had a similar problem where in I had a textbox which when is empty had to be sent has null rather than empty string. I decided to create a directive in angular in which I used hostlistener to check if the value is empty string then reset it to null.

@Directive({
  selector: '[appEmptyToNull]'
})
export class EmptyToNullDirective {
  constructor(@Self() private ngControl: NgControl) { }

  @HostListener('keyup', ['$event']) onKeyDowns(event: KeyboardEvent) {
    if (this.ngControl.value?.trim() === '') {
      this.ngControl.reset(null);
    }
  }
}

And this in HTML you can use the directive like this

<input type="text" appEmptyToNull formControlName="firstname" />

This is can also be done using valueChanges property in Reactive form. You can check if the value of the form field is empty then reset it to null

this.form.get("firstname").valueChanges.subscribe((response: string)=> {
      console.log("valuechanges -> ",response)
      if (response?.length == 0) {
        this.form.get("firstname").setValue(null)
      }
    })

I don't know if this are right way to achieve it but these are 2 possible ways to do it.

You can set a field value to null

this.someForm = this.fb.group({isbn: new FormControl(null, Validators.pattern(/^\d{10}$|^\d{13}$/)) })

If you dont want to send an empty string.