Validators.required，Validators.email

Question

我在ts中创建表单：

private _createForm() {
    this.addForm = this._formBuilder.group({
        login: [ null, Validators.required ],
        name: [ null, Validators.required ],
        surname: [ null, Validators.required ],
        email: [ null, Validators.required, Validators.email]
    });
}

在html中：

...
<forms-validation feedback="Niepoprawny adres email" [dataObj]="addForm ? addForm.controls.email : null" [inputRef]="email">
   <input type="text" name="email" formControlName="email" #email maxlength="{{maxlength}}" class="form-control" LayoutInput />
</forms-validation>
...

但验证不起作用-需要它OK，但电子邮件验证器不起作用。

Answer 1

您需要将验证器放入子数组中。

email: [null, [Validators.required, Validators.email]]
              ^                                     ^

Answer 2

我找到了另一个答案：

<input email type="text" name="email" formControlName="email" #email maxlength="{{maxlength}}" class="form-control" LayoutInput />

Answer 3

请尝试使用模式验证器，因为电子邮件无法正常工作。

email: ['', [Validators.required, Validators.pattern('^[A-Za-z0-9._%+-]+@[A-Za-z0-9._%+-]{2,}[.][A-Za-z]{2,}$')]]