时间戳

首页 > 解决方案 > 即使表单具有有效值，Angular 4 按钮也被禁用

javascript - 即使表单具有有效值，Angular 4 按钮也被禁用

问题描述

我已经创建了一个响应式表单，它被称为 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>

当我尝试填写所有值时，即使所有值都已在表单中正确填写，注册按钮也会被禁用

标签： javascriptangular

解决方案

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

要调试表单，您可以在视图中记录表单控件，就像我在示例中所做的那样：

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

它在您的视图中呈现为这样，以便您调试它（例如）：

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

推荐阅读