title: Why set empty string as null in reactive form become empty string
body: <p>I'm trying to convert every string input to null upon cahnge. 
  So i create a directive to listen on every change and assign null to empty string.</p>
  
  <p>And here is the HTML</p>
  
  <pre><code>&lt;form [formGroup]="form" class="mt-4 p-2" (ngSubmit)="onSubmit()"&gt;
    &lt;input nbInput fullWidth fieldSize="small" shape="semi-round" formControlName="AuthorityNum" EmptyToNull&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is the directive code:</p>
  
  <pre><code>import { Directive, Input, HostListener, ElementRef } from 
  '@angular/core';
  
  @Directive({
  selector: '[EmptyToNull]'
  })
  export class NullValueDirective {
  
   constructor() {
   }
  
   @HostListener('change', ['$event.target.value']) onKeyDowns(value) {
   if (value === '') {
    value = null;
    console.log(value) // print: null
    }
   }
  }
  </code></pre>
  
  <p>It looks like it change the value to null  </p>
  
  <p>But when i submit the form and inspect the form.value it appears as empty string again.</p>
  
  <p>why?</p>
  
  <p><strong>Update</strong>:</p>
  
  <p>Here is my submit function:</p>
  
  <pre><code>onSubmit() {
   // TODO: Send to server
    this.form.value.AuthorityNum === '' // true
    }
  </code></pre>
  
  <p>Here is the code at stackblitz:  <a href="https://stackblitz.com/edit/angular-ilcg7y" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ilcg7y</a></p>