使用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屋！