Angular 2需要表单组中的两个项目之一
问题描述:
我想验证具有三个字段的被动表单。用户名始终是必填字段,但我只希望用户除了输入用户名之外,还必须输入电话号码或电子邮件,我无法弄清楚如何操作。Angular 2需要表单组中的两个项目之一
我试过嵌套窗体组和自定义验证器,我也尝试了解决方案here,但没有运气。
这是我目前的HTML表单:
<div class="container"><br>
<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" formControlName="username" class="form-control">
<span *ngIf="!signupForm.get('username').valid && hasBeenSubmitted == true" style="color: red">Please enter a valid username!</span>
</div>
<br><hr>
<div formGroupName="userdata">
<div class="form-group">
<label for="email">email</label>
<input type="text" id="email" formControlName="email" class="form-control">
</div>
or <br>
<div>
<label for="phoneNumber">phone</label>
<input type="text" formControlName="phoneNumber">
</div>
</div>
<hr>
<button class="btn btn-primary" type="submit">Submit</button>
<span *ngIf="!signupForm.get('userdata.email').valid && hasBeenSubmitted == true && hasBeenSubmitted == true && !signupForm.get('userdata.email').valid
&& hasBeenSubmitted == true" style="color: red">Please enter a valid email or phone number!</span>
</form>
</div>
我的打字稿:
export class AppComponent implements OnInit {
signupForm: FormGroup;
hasBeenSubmitted = false;
ngOnInit() {
this.signupForm = new FormGroup({
'username': new FormControl(null, Validators.required),
'nickname': new FormControl(null, Validators.required),
// Nested formgroup:
'userdata': new FormGroup({
'email': new FormControl(null, [Validators.required, Validators.email]),
'phoneNumber': new FormControl(null, [Validators.required]),
}),
});
}
onSubmit() {
this.hasBeenSubmitted = true; // I use this variable to validate after submission
}
}
当用户提交表单而不需通过电子邮件或电话号码,我想错误文本阅读: Please enter a valid email or phone number!
。当用户开始输入有效的电子邮件或电话号码时,这将解决。
如何验证我的表单,以便用户只需输入用户名和电话号码,或用户名和电子邮件地址即可使表单有效?
Plunkr我当前的代码: https://plnkr.co/edit/1IyVQblRX1bZxOXIpyQF?p=preview
答
正如你所说,你可以使用自定义的验证为组:
this.signupForm = new FormGroup({
'username': new FormControl(null, Validators.required),
'nickname': new FormControl(null, Validators.required),
// Nested formgroup:
'userdata': new FormGroup({
'email': new FormControl(null),
'phoneNumber': new FormControl(null),
}, this.validateUserData)
});
其中validateUserData
方法是这样的:
validateUserData(formGroup) {
const emailCtrl = formGroup.get('email');
const phoneCtr = formGroup.get('phoneNumber');
if (emailCtrl.value && !Validators.email(emailCtrl) || phoneCtr.value) {
return null;
}
return { required: true };
}
和最后你需要做的是改变模板,如:
<span *ngIf="!signupForm.get('userdata').valid && hasBeenSubmitted" ...>
Please enter a valid email or phone number!
</span>
非常感谢你! – Edon