即使表单具有有效值，也会禁用Angular 4按钮 [英] Angular 4 button disabled even if the form has valid values

问题描述

我已经创建了一个Reactive Form，它被称为signupForm，其中有不同的值，这里是代码

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

我的HTML代码是我使用的是被动形式，这是我的提交按钮即使我正确输入所有细节也被禁用

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

推荐答案

它似乎来自您的电子邮件正则表达式。 我在这里复制了您的示例（简化），似乎电子邮件 formControl无效。

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

编辑：

您的电子邮件正则表达式后，您似乎忘记了 g 标记。因此，在正则表达式的末尾添加它似乎可以使它工作。我更新了示例。

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.

所以现在你的正则表达式就像（注意 g 之后）：

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

这篇关于即使表单具有有效值，也会禁用Angular 4按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！