title: Angular 4 Reactive Form Enable Field After refresh page
body: <p>I have a reactive from declared in angular 4 </p>
  
  <pre><code>this.userForm = this.fb.group({
    "id": [user ? user.id : ""],
    "profile": this.fb.group({
      "email": [user &amp;&amp; user.profile.email ? { value: user.profile.email, disabled: true } : "", Validators.compose([Validators.required, Validators.email])],
    }),
  
    "username": [user &amp;&amp; user.username ? { value: user.username, disabled: true } : "", Validators.compose([Validators.required, GlobalValidator.usernameFormat])],
  })
  </code></pre>
  
  <p>By default if my form is filled out with the data the form field is disabled (email, username).
  The problem that I am facing is, If I refresh my page the form field appears enabled.</p>
  
  <p>(EDITED)</p>
  
  <pre><code>    ngOnInit() {
         this.buildForm()
         if (this.activatedRoute.snapshot.params.id) {
           this.service.getUser(Number(this.activatedRoute.snapshot.params.id)).subscribe((user) =&gt; {
            this.buildForm(user)
          }) 
         }
       }
       buildForm(user?:any){
         this.userForm = this.fb.group({
           "id": [user ? user.id : ""],
           "profile": this.fb.group({
            "email": [user &amp;&amp; user.profile.email ? { value: user.profile.email, disabled: true } : "", Validators.compose([Validators.required, Validators.email])],
        }),
  
        "username": [user &amp;&amp; user.username ? { value: user.username, disabled: true } : "", Validators.compose([Validators.required, GlobalValidator.usernameFormat])],
      })
  </code></pre>
  
  <p>}</p>