使用Angular 2从两个字段中需要一个 [英] Require one from two fields using Angular 2
问题描述
我正在尝试创建一个联系表单。表单如下所示:
I'm trying to create a contact form. The form looks like this:
<form novalidate [formGroup]="contact" (ngSubmit)="send()">
<p>
<label>Name
<br>
<input type="text" class="input" value="" formControlName="name">
<span class="error">Enter your name</span>
</label>
</p>
<p>
<label>E-mail
<br>
<input type="email" class="input" value="" formControlName="email">
<span class="error">It looks like this email is invalid</span>
</label>
</p>
<p>
<label>Phone
<br>
<input type="text" class="input" value="" formControlName="telefone">
<span class="error">It looks like this phone number is invalid</span>
</label>
</p>
<p>
<label>Message
<br>
<textarea type="text" class="input" value="" formControlName="message"></textarea>
<span class="error">The message can't be empty</span>
</label>
</p>
<p class="submit">
<input type="submit" name="submit" class="bt" value="Send">
</p>
</form>
在此表单中,只需要提供消息,姓名,电子邮件或电话号码字段。
In this form only the message and the name and email or the phone number fields should be required.
我正在使用 formBuilder
类,所以这里是TypeScript代码:
I'm using a formBuilder
class, so here's the TypeScript code:
this.contact = this.formBuilder.group({
name: ['', Validators.required],
email: ['', Validators.compose([/*Use custom validador??*/])],
phone: ['', Validators.compose([/*Use custom validador??*/]],
message: ['', Validators.required]
});
我试过用自定义验证器作为解决方案,但我无法找到解决方案。任何建议?
I tried using custom validators as a solution, but I could not figure out a solution. Any suggestions?
推荐答案
是的,自定义验证器是要走的路。
Yes, a custom validator is the way to go.
像这样制作你的表格组:
Make your form group like this:
this.contact = this.formBuilder.group({
name: ['', Validators.required],
email: ['', Validators.required],
phone: ['', Validators.required],
message: ['', Validators.required]
}, {validator: this.customValidationFunction})
然后让 customValidationFunction
检查验证。仅举例来说:
Then have the customValidationFunction
check for validation. Made up validation just for example:
customValidationFunction(formGroup): any {
let nameField = formGroup.controls['name'].value; //access any of your form fields like this
return (nameField.length < 5) ? { nameLengthFive: true } : null;
}
像这样更改每个输入(将p标签更改为div。替换控件每个名称,并在适当的情况下更改隐藏span标记验证的语法):
Change each input like this (changing your p tags to divs. Substitute the control name for each and change syntax for the hidden span tag validation where appropriate):
<div [ngClass]="{'has-error':!contact.controls['name'].valid && contact.controls['name'].touched}">
<label>Name</label>
<input class="input" type="text" [formControl]="contact.controls['name']">
<span [hidden]="!contact.hasError('nameLengthFive')" class="error">Enter your name</span>
</div>
这篇关于使用Angular 2从两个字段中需要一个的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!