Angular 2+自定义验证器“是否需要”填写另一个字段

Steverippl

我正在尝试为模板驱动的表单创建自定义验证器,其中如果一个字段填充到另一个字段中则是必需的,但是如果第一个字段为空,则也不需要第二个。

按照文档中的(打字稿)示例构建自定义验证程序指令,我可以使该指令在某个字段上运行,并将其名称传递给另一个。现在这是我的问题...

如果在字段1中输入了一个值,并且检查字段2为空,如何在字段2上设置“无效”?(我知道我可以访问其AbstractControl)。

如果我自己在字段2上设置了“无效”,是否需要在字段2上使用单独的验证器以在填写无效状态时将其删除?

还是在触发字段1的验证器时(应该如何)在字段2上添加内置的“必需”验证器?

非常感谢您的指导!

加斯·梅森

我认为您无需自定义验证器就可以实现您想要的。

下面的代码来自模板驱动的表单-required将第二个字段上的验证器指令绑定到第一个字段中的ngModel值。因此,当第一个字段具有值时,这里将条件验证应用于第二个字段。

First: <input type="text" name="first" [(ngModel)]="theFirst" #first="ngModel" >

Second: <input type="text" ngModel [required]="theFirst ? true : null " #second="ngModel" name="second"/>

<div *ngIf="second.errors">
  <span [hidden]="!second.errors.required">Second is required</span>
</div>

关于条件验证绑定的进一步讨论在这里

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

依赖于另一个表单控件的Angular 2自定义验证器

Angular 2或4反应性表单集验证取决于另一个字段值

Angular 2自定义验证器,用于检查何时需要两个字段之一

在Angular 2的另一个服务中注入自定义服务

数据库 - 有 2 个表,需要另一个同时具有 ID 和另一个字段的表

Angular 2:在另一个组件上定义一个路由器,而不是引导的组件

每当一个或另一个字段使用Angular指令更改模型(每次击键)时,都要验证密码并确认密码字段

Angular 2-自定义验证器语法

带有参数的Angular 2自定义验证器

Angular 2从自定义验证器检索错误消息

Angular2自定义验证器未调用

如何在Angular 7中使用反应形式设置“至少应填写一个字段”验证?

select2字段取决于另一个字段

获取当前选定的对象作为Angular中另一个字段的参数

Angular FormGroup-自动将另一个字段的值除以100

自定义验证器,用于Angular2中的唯一性

Angular2将身份验证令牌传递给另一个服务

PHP:比较2个不同的数组/对象。检查另一个字段中是否存在字段值

组基于另一个字段中的2个相同数据组成一个字段

我想根据一个字段“LIKE”另一个字段的内容加入 2 个表

ASP.NET自定义验证器在2个字段上

Angular 2将重点放在组件加载时表单的第一个字段上

Angular2,Typescript:如何将对象数组推入仅包含对象几个字段的另一个对象数组

Angular 8更新文本字段以响应另一个字段更改

angular2是否可以从另一个angular2项目中导入组件?

Angular 2将服务注入到另一个服务中未定义

Angular 2+:检查dom元素是否是另一个dom元素的子元素

如何使用 formik 和 yup 在需要来自另一个字段的值的字段中创建自定义验证

Angular 6仅需要多个字段中的一个字段