我已经创建了一个Reactive Form，它被称为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>
当我尝试填写所有值时，注册按钮被禁用，即使所有值都已在表单中正确填充
答案 0 :(得分：1)
它似乎来自您的电子邮件正则表达式。 I reproduced your example (simplified) here，似乎email formControl无效。
要调试表单，您可以在视图中记录表单控件，就像我在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>
它在你的视图中呈现，以便让你调试它（例如）：
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
答案 1 :(得分：1)
用于调试
console.log(this.signupForm);
在控制台的FormGroup -> controls -> input element name -> status下
如果状态为无效，请使用
FormGroup -> controls -> input element name -> errors