我已经创建了一个响应式表单，它被称为 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 代码是我使用的响应式(Reactive)表单，这是我的提交按钮，即使我正确输入了所有详细信息，它也被禁用
<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>
当我尝试填写所有值时，注册按钮被禁用，即使所有值都已正确填写在表单中
最佳答案
它似乎来自您的电子邮件正则表达式。 I reproduced your example (simplified) here ，而且 email formControl 似乎无效。
要调试您的表单，您可以像我在 the example 中所做的那样在您的 View 中记录表单控件。 :
<!-- 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>
它在您的 View 中呈现为这样，以便您调试它(例如):
false
false
true
false
false
true
true
true
true
true
编辑:
您似乎忘记了电子邮件正则表达式后的 g 标志。所以在正则表达式的末尾添加它似乎可以让它工作。我更新了the example .
现在你的正则表达式是这样的(注意它后面的 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
关于javascript - 即使表单具有有效值，Angular 4 按钮也会被禁用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50020816/