title: Angular 4 button disabled even if the form has valid values
body: <p>I am have created a Reactive Form which is know as signupForm which has different values  here is the code</p>
  
  <pre><code> signupForm = new FormGroup({
      name : new FormControl('',[Validators.required,Validators.maxLength(20)]),
      email : new FormControl('',[Validators.required,Validators.maxLength(20),Validators.pattern('/^(([^&lt;&gt;()[\]\\.,;:\s@\"]+(\.[^&lt;&gt;()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/')]),
      username: new FormControl('',[Validators.required,Validators.minLength(5)]),
      password : new FormControl('',[Validators.required,Validators.minLength(8),Validators.maxLength(20)]),
      usermobile: new FormControl('',[Validators.required]),
      usercompany: new FormControl('',[Validators.maxLength(50)]),
      usercity: new FormControl('',[Validators.maxLength(20)]),
      usercountry:new FormControl('IN'),
      websiteurl: new FormControl(''),
      usertype: new FormControl('1')
    });
  
   onSubmit(){
     let udata= {}
     udata = this.signupForm.value;
     this._httpService.signup(udata).subscribe((result)=&gt;{
       console.log(result);
     })
   }
  
   checkusername(event){
     let data = event.target.value;
     if (data != '') {
      this._httpService._username(data)
        .subscribe((result) =&gt; {
          if (result.status == "sucess") {
            this.username_check = true;
          } else {
            this.username_check = false;
          }
        },
        (err: any) =&gt; {
          if (err.status == 0) { console.log('please check your internet connection'); }
          else if (err.status == 500) { console.log('oops something went wrong, please try again!!'); }
        },
        () =&gt; console.log());
    }
   }
  
   clearMsgForUsername() {
    this.username_check = true;
  }
  </code></pre>
  
  <p>My HTML code were i am using the reactive form , here is my submit button which is disabled even if i enter all the details correctly</p>
  
  <pre><code>   &lt;form [formGroup]="signupForm" (ngSubmit)="onSubmit()"&gt;
              &lt;div id="signin-form" class="login-form animated preFadeInLeft fadeInLeft"&gt;
                &lt;!-- Input --&gt;
                &lt;div class="field pb-10"&gt;
                  &lt;div class="control required"&gt;
                    &lt;input formControlName="name" class="input is-large" type="text" placeholder="Name"&gt;
                  &lt;/div&gt;
                  &lt;div *ngIf="signupForm.controls['name'].hasError('required')  &amp;&amp; (signupForm.controls['name'].dirty || signupForm.controls['name'].touched)"
                    class="error"&gt;
                    Please enter a password
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="field pb-10"&gt;
                  &lt;div class="control required"&gt;
                    &lt;input formControlName="email" class="input is-large" type="email" placeholder="Email"&gt;
                  &lt;/div&gt;
                  &lt;div *ngIf="signupForm.controls['email'].hasError('required') &amp;&amp; (signupForm.controls['email'].dirty || signupForm.controls['email'].touched)"
                    class="error"&gt;
                    Please Enter a valid email
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="field pb-10"&gt;
                  &lt;div class="control required"&gt;
                    &lt;input formControlName="username" (blur)="checkusername($event)" (keyup)="clearMsgForUsername()" class="input is-large" type="text" placeholder="Username"&gt;
                  &lt;/div&gt;
                  &lt;div *ngIf="signupForm.controls['username'].hasError('required') &amp;&amp; (signupForm.controls['username'].dirty || signupForm.controls['username'].touched)"
                    class="error"&gt;
                     Username is required
                  &lt;/div&gt;
                  &lt;div *ngIf="!username_check" class="error"&gt;
                      Already associated with a different account.
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- Input --&gt;
                &lt;div class="field pb-10"&gt;
                  &lt;div class="control required"&gt;
                    &lt;input formControlName="password" class="input is-large" type="password" placeholder="Password"&gt;
                  &lt;/div&gt;
                  &lt;div *ngIf="signupForm.controls['password'].hasError('required') &amp;&amp; (signupForm.controls['password'].dirty || signupForm.controls['password'].touched)"
                    class="error"&gt;
                     Password is required
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="field pb-10"&gt;
                  &lt;div class="control required"&gt;
                    &lt;input formControlName="usermobile" class="input is-large" type="text" placeholder="Mobile"&gt;
                    &lt;div *ngIf="signupForm.controls['usermobile'].hasError('required')&amp;&amp;(signupForm.controls['usermobile'].dirty || signupForm.controls['usermobile'].touched)"
                    class="error"&gt;
                     Please Enter a Mobile Number
                  &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="field pb-10"&gt;
                  &lt;div class="control required"&gt;
                    &lt;input formControlName="usercompany" class="input is-large" type="text" placeholder="Company"&gt;
                  &lt;/div&gt;
                 &lt;!-- &lt;div *ngIf="signupForm.controls['usercompany'].dirty &amp;&amp; signupForm.controls['usercompany'].touched"
                    class="error"&gt;
                      This field is optional if you are a freelancer
                  &lt;/div&gt; --&gt;
                &lt;/div&gt;
                &lt;div class="field pb-10"&gt;
                  &lt;div class="control required"&gt;
                    &lt;input formControlName="usercity" class="input is-large" type="text" placeholder="City"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="field pb-10"&gt;
                  &lt;div class="control required"&gt;
                    &lt;input formControlName="websiteurl" class="input is-large" type="text" placeholder="Website"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;!--Input--&gt;
                &lt;!--Input--&gt;
                &lt;div class="field"&gt;
                  &lt;div class="control required"&gt;
                    &lt;div class="select is-large"&gt;
                      &lt;select formControlName="usertype"&gt;
                        &lt;option value="1"&gt;Freelancer&lt;/option&gt;
                        &lt;option value="2"&gt;Company&lt;/option&gt;
                      &lt;/select&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- Submit --&gt;
                &lt;p class="control login"&gt;
                  &lt;button type="submit" [disabled]="!signupForm.valid" class="button button-cta primary-btn btn-align-lg btn-outlined is-bold is-fullwidth rounded raised no-lh"&gt;Signup&lt;/button&gt;
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/form&gt;
  </code></pre>
  
  <p>When i try to fill all the values the signup button is disabled even all the values has been filled properly in the form</p>