angular 2+ 中的自定义输入类型

Posted 2023-03-13

【中文标题】angular 2+ 中的自定义输入类型

【英文标题】：Custom input types in angular 2+

【发布时间】：2018-06-11 23:07:33

【问题描述】：

我想为我的 Angular 2 项目使用自定义输入类型（即）<input type='dob'> 创建自定义验证。我在堆栈溢出中看到了一个问答，它有一个解决方案，但不幸的是，它是针对 angular 1 的。有人可以帮我解决这个问题吗？

提前致谢

【参考方案1】：

为验证创建一个验证器类和静态方法。

export class CustomValidator
static nameValidator(control)
   //if valid return true;
  //if invalid return 'errorMsg': 'error desc';
 

您可以像这样使用验证：

formData = formBuilder.group( customValidationField : [[CustomValidator.nameValidator]]  )

谢谢

【参考方案2】：

您可以在 Angular 中使用 ReactiveFormModule，它可以让您选择构建自定义表单验证

@NgModule(
  imports:[ReactiveFormModule,...]
)
------------------------------------------------
myFormGroup = new FormGroup(
   'dateOfBirth': new FormControl(null, [/*here an array of validations*/ this.dateValidation.bind(this)])
)

dateValidation(control: any): [s: string]: boolean  
   if((<dob>control.value).value == '10/08/2017')
     return 'not_old_enough': true; // if you want to send error
   return null;
)

///// and in html
<form [formGroup]='myFormGroup'>
 <input
    name="dateOfBirth"
    type="dob"
    formControlName='dataOfBirth' />
</form>