title: Angular Unit testing - Reactive Form value not updating
body: <p>I am new to angular unit testing. 
  Test Scenario: The form view value in the html is equal to the component form value.
  The email value is retrieved by a shared value and being used in the component registration form. I could retrieve the email value from the component using the reactive forms, but when trying to access via the native element, it gives empty. 
  Below is the component.ts</p>
  
  <pre><code>ngOnit(public serviceEmail) {
      this.assignEmailAvailable();
      this.createRegistration();
  
      }
  assignEmailAvailable() {
   if(service.email){
      this.email = serviceEmail.email;
    }
   }   
  createRegistration() {
     this.registerForm = new FormGroup({
         email:new FormControl({value:this.email})
      })
  }
  </code></pre>
  
  <p>In the component.spec.ts, I am gonna call this function and check whether both values are same.
  component.spec.ts</p>
  
  <pre><code> beforeEach(() =&gt; {
      fixture = TestBed.createComponent(RegisterComponent);
      component = fixture.componentInstance;
      service = TestBed.get(serviceEmail);
    });
  it('Registration Form Creation', fakeAsync(() =&gt; {
      service.email = "dsf@gmail.com";
  
      fixture.detectChanges();
  
      component.assignEmailAvailable();
      component.createRegisterForm();
  
      fixture.detectChanges();
      fixture.whenStable().then(() =&gt; {
      const email = fixture.debugElement.query(By.css('input[id="email"]')).nativeElement;
  //The value is empty even after creating the form using the component function
      expect(email.value).toBe(component.emailValue);
      });
  //THis returns me the value set
      expect(component.registerForm.get('email').value).toBe(component.emailValue);
    }));
  </code></pre>