javascript – 使用Angular 2从两个字段中获取一个

我正在尝试创建一个联系表单.表单如下所示:

<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>

在此表单中,只需要消息和名称以及电子邮件或电话号码字段.

我正在使用formBuilder类,所以这里是TypeScript代码:

this.contact = this.formBuilder.group({
  name: ['', Validators.required],
  email: ['', Validators.compose([/*Use custom validador??*/])],
  phone: ['', Validators.compose([/*Use custom validador??*/]],
  message: ['', Validators.required]
});

我尝试使用自定义验证器作为解决方案,但我无法找到解决方案.有什么建议?

解决方法:

是的,自定义验证器是可行的方法.

使您的表单组像这样:

this.contact = this.formBuilder.group({
  name: ['', Validators.required],
  email: ['', Validators.required],
  phone: ['', Validators.required],
  message: ['', Validators.required]
}, {validator: this.customValidationFunction})

然后让customValidationFunction检查验证.仅举例来说:

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标记验证的语法):

<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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐