Question

我正在使用表单验证，其中表单包含一个电子邮件字段，并且类型为text（即）input [type ='text']。我使用模式来验证电子邮件，这意味着使用RegExp进行自定义验证。

现在我的问题是我可以验证字段是否为空。但是，在进行模式验证时，我无法获得预期的结果。

所以我需要的是一种使用Angular2验证模式的方法。

Answer 1

如果您在Angular2中使用被动表单（我认为它出现在4.2.5版本中）您可以设置表单控件将使用的验证程序，并且它内置了电子邮件验证。

有关详细信息，请参阅角度文档。

https://angular.io/api/forms/Validators

编辑：

这是一个使用它的Plunker示例。

Plunker Example

以下是代码的副本

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule, FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="userform">
          <div class="form-group">
             <input type="text" formControlName="userEmail" />
                  <p *ngIf="userform.get('userEmail').hasError('email') && !userform.controls['userEmail'].valid && userform.get('userEmail').touched">Email is invalid.</p>
          </div>
        </form>
  `,
})
export class App implements OnInit {
    userform: FormGroup;

    constructor(private _fb: FormBuilder) { }

    buildForm() {
        this.userform = this._fb.group({
            userEmail: [null, Validators.email]
        });
    }

    ngOnInit() {
        this.buildForm();
    }
}

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule, ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 2

您现在可以使用email作为属性（angular4中的指令）现在以角度来验证电子邮件验证，就像这样

<input type="email" name="email" ngModel email>

有关详细信息，请参阅此处

https://angular.io/api/forms/EmailValidator

使用Angular2中的模式进行电子邮件验证的最佳方法是什么？

2 个答案: