Кнопка Angular 4 отключена, даже если форма имеет допустимые значения

Question

Я создал Реактивную форму, которая известна как signupForm, которая имеет различные значения, вот код

 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;
}

Мой HTML-код, в котором я использую реактивную форму, вот моя кнопка отправки, которая отключена, даже если я ввожу все данные правильно

   <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>

Когда я пытаюсь заполнить все значения, кнопка регистрации отключается, даже если все значения были правильно заполнены в форме

Answer 1

Похоже, это от вашего регулярного выражения электронной почты. Я воспроизвел ваш пример (упрощенно) здесь , и кажется, что email formControl недействителен.

Для отладки ваших форм вы можете регистрировать элементы управления формы в своем представлении, как ясделано в примере :

<code><!-- DEBUG -->
<pre>{{signupForm.get('name').valid}}

{{signupForm.get('email').valid}}

{{signupForm.get('username').valid}}

{{signupForm.get('password').valid}}

{{signupForm.get('usermobile').valid}}

{{signupForm.get('usercompany').valid}}

{{signupForm.get('usercity').valid}}

{{signupForm.get('usercountry').valid}}

{{signupForm.get('websiteurl').valid}}

{{signupForm.get('usertype').valid}}

Это выглядит так в вашем представлении, чтобы позволить вам отладить его (например):

false
false
true
false
false
true
true
true
true
true

РЕДАКТИРОВАТЬ :

Похоже, что вы забылиg флаг после регулярного выражения вашей электронной почты.Таким образом, добавление его в конце регулярного выражения, кажется, заставляет его работать.Я обновил пример .

Так что теперь ваше регулярное выражение выглядит так (обратите внимание на g после него):

/^(([^<>()[\]\\.,;:\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