有条件地在Angular 2反应形式的表单字段中实现验证
发布时间:2020-12-17 07:16:46 所属栏目:安全 来源:网络整理
导读:我可以有条件地实现Angular 2反应形式的验证.我有这个带有3个formControl字段的反应形式,一个是选择,另外两个是名字和姓氏的输入文本.我想根据第一个字段“validateBy”的选择有条件地实现firstname和lastname的验证.如果用户选择’byFirstName’,则只应验证
我可以有条件地实现Angular 2反应形式的验证.我有这个带有3个formControl字段的反应形式,一个是选择,另外两个是名字和姓氏的输入文本.我想根据第一个字段“validateBy”的选择有条件地实现firstname和lastname的验证.如果用户选择’byFirstName’,则只应验证firstName.如果用户选择’byLastName’,则只应验证lastName.如果用户选择’byBoth’,则应验证firstName和lastName.我为此创造了一个plunker.只有两个验证工作.
ngOnInit() { this.myForm = this._fb.group({ validateBy: ['byFirstName'],firstName: ['',isFirstNameValid(() => (this.validateBy === 'byFirstName' || this.validateBy === 'byBoth'),Validators.required)],lastName: ['',isLastNameValid(() => (this.validateBy === 'byLastName' || this.validateBy === 'byBoth'),}); https://plnkr.co/edit/X0zOGf?p=preview 解决方法
问题是您的代码只计算一次表达式 – 创建FormGroup时.您需要通过创建自定义验证器使其动态化,该验证器将在每次调用时评估表达式:
this.personForm= this.fb.group({ firstName: ['',Validators.required]; lastName: [ '',conditionalValidator( (() => this.isValidationForLastName === true),Validators.required ) ] }); function conditionalValidator(condition: (() => boolean),validator: ValidatorFn): ValidatorFn { return (control: AbstractControl): {[key: string]: any} => { if (! condition()) { return null; } return validator(control); } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |