Angular 4 button disabled even if the form has valid values

Question

I am have created a Reactive Form which is know as signupForm which has different values here is the code

 signupForm = new FormGroup({
    name : new FormControl('',[Validators.required,Validators.maxLength(20)]),
    email : new FormControl('',[Validators.required,Validators.maxLength(20),Validators.pattern('/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\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)=>{
     console.log(result);
   })
 }

 checkusername(event){
   let data = event.target.value;
   if (data != '') {
    this._httpService._username(data)
      .subscribe((result) => {
        if (result.status == "sucess") {
          this.username_check = true;
        } else {
          this.username_check = false;
        }
      },
      (err: any) => {
        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!!'); }
      },
      () => console.log());
  }
 }

 clearMsgForUsername() {
  this.username_check = true;
}

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

   <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
            <div id="signin-form" class="login-form animated preFadeInLeft fadeInLeft">
              <!-- Input -->
              <div class="field pb-10">
                <div class="control required">
                  <input formControlName="name" class="input is-large" type="text" placeholder="Name">
                </div>
                <div *ngIf="signupForm.controls['name'].hasError('required')  && (signupForm.controls['name'].dirty || signupForm.controls['name'].touched)"
                  class="error">
                  Please enter a password
                </div>
              </div>
              <div class="field pb-10">
                <div class="control required">
                  <input formControlName="email" class="input is-large" type="email" placeholder="Email">
                </div>
                <div *ngIf="signupForm.controls['email'].hasError('required') && (signupForm.controls['email'].dirty || signupForm.controls['email'].touched)"
                  class="error">
                  Please Enter a valid email
                </div>
              </div>
              <div class="field pb-10">
                <div class="control required">
                  <input formControlName="username" (blur)="checkusername($event)" (keyup)="clearMsgForUsername()" class="input is-large" type="text" placeholder="Username">
                </div>
                <div *ngIf="signupForm.controls['username'].hasError('required') && (signupForm.controls['username'].dirty || signupForm.controls['username'].touched)"
                  class="error">
                   Username is required
                </div>
                <div *ngIf="!username_check" class="error">
                    Already associated with a different account.
                  </div>
              </div>
              <!-- Input -->
              <div class="field pb-10">
                <div class="control required">
                  <input formControlName="password" class="input is-large" type="password" placeholder="Password">
                </div>
                <div *ngIf="signupForm.controls['password'].hasError('required') && (signupForm.controls['password'].dirty || signupForm.controls['password'].touched)"
                  class="error">
                   Password is required
                </div>
              </div>
              <div class="field pb-10">
                <div class="control required">
                  <input formControlName="usermobile" class="input is-large" type="text" placeholder="Mobile">
                  <div *ngIf="signupForm.controls['usermobile'].hasError('required')&&(signupForm.controls['usermobile'].dirty || signupForm.controls['usermobile'].touched)"
                  class="error">
                   Please Enter a Mobile Number
                </div>
                </div>
              </div>
              <div class="field pb-10">
                <div class="control required">
                  <input formControlName="usercompany" class="input is-large" type="text" placeholder="Company">
                </div>
               <!-- <div *ngIf="signupForm.controls['usercompany'].dirty && signupForm.controls['usercompany'].touched"
                  class="error">
                    This field is optional if you are a freelancer
                </div> -->
              </div>
              <div class="field pb-10">
                <div class="control required">
                  <input formControlName="usercity" class="input is-large" type="text" placeholder="City">
                </div>
              </div>
              <div class="field pb-10">
                <div class="control required">
                  <input formControlName="websiteurl" class="input is-large" type="text" placeholder="Website">
                </div>
              </div>
              <!--Input-->
              <!--Input-->
              <div class="field">
                <div class="control required">
                  <div class="select is-large">
                    <select formControlName="usertype">
                      <option value="1">Freelancer</option>
                      <option value="2">Company</option>
                    </select>
                  </div>
                </div>
              </div>
              <!-- Submit -->
              <p class="control login">
                <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">Signup</button>
              </p>
            </div>
          </form>

When i try to fill all the values the signup button is disabled even all the values has been filled properly in the form

Answer 1

For debug

console.log(this.signupForm);

In console, under FormGroup -> controls -> input element name -> status

if status as INVALID check with

FormGroup -> controls -> input element name -> errors

Answer 2

It seems it comes from your email regex. I reproduced your example (simplified) here, and it seems that the email formControl isn't valid.

To debug your forms you can log the form controls in your view like I done in the example:

<!-- DEBUG -->
<pre>{{signupForm.get('name').valid}}</pre>
<pre>{{signupForm.get('email').valid}}</pre>
<pre>{{signupForm.get('username').valid}}</pre>
<pre>{{signupForm.get('password').valid}}</pre>
<pre>{{signupForm.get('usermobile').valid}}</pre>
<pre>{{signupForm.get('usercompany').valid}}</pre>
<pre>{{signupForm.get('usercity').valid}}</pre>
<pre>{{signupForm.get('usercountry').valid}}</pre>
<pre>{{signupForm.get('websiteurl').valid}}</pre>
<pre>{{signupForm.get('usertype').valid}}</pre>

It renders like that in your view in order to let you debug it (e.g.):

false
false
true
false
false
true
true
true
true
true

EDIT:

It appears that you forgot the g flag after your email regex. So adding it at the end of the regex seems to make it work. I updated the example.

So now your regex is like (notice the g after it):

/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\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,}))$/g