首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如果另一个字段中包含Angular 6中的值,则输入为必填

在Angular 6中,如果另一个字段中包含特定的值,那么输入字段将变为必填项。这可以通过使用Angular的响应式表单来实现。

首先,我们需要在组件的HTML模板中定义两个字段,一个是用于输入的字段,另一个是用于触发必填逻辑的字段。例如:

代码语言:txt
复制
<form [formGroup]="myForm">
  <input type="text" formControlName="inputField">
  <input type="checkbox" formControlName="triggerField">
</form>

然后,在组件的Typescript代码中,我们需要创建一个响应式表单并定义相应的验证规则。我们可以使用Validators.required来将输入字段设置为必填项。同时,我们需要监听触发字段的值变化,并根据其值来动态更新输入字段的验证规则。代码示例如下:

代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      inputField: ['', Validators.required],
      triggerField: ['']
    });

    this.myForm.get('triggerField').valueChanges.subscribe(value => {
      const inputField = this.myForm.get('inputField');
      if (value === 'specificValue') {
        inputField.setValidators(Validators.required);
      } else {
        inputField.clearValidators();
      }
      inputField.updateValueAndValidity();
    });
  }
}

在上述代码中,我们使用FormBuilder来创建一个响应式表单,并定义了两个字段:inputFieldtriggerFieldinputField的初始值为空字符串,而triggerField的初始值为一个复选框的默认值。

然后,我们通过订阅triggerField的值变化来监听触发字段的变化。当triggerField的值等于特定的值(例如"specificValue")时,我们将inputField的验证规则设置为必填项;否则,我们清除inputField的验证规则。

最后,我们使用inputField.updateValueAndValidity()来更新输入字段的验证状态,以便在用户交互时及时显示错误信息。

这样,当triggerField的值等于特定值时,inputField将变为必填项,否则可以为空。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 指南- 表单 顶

这个表格三个字段两个是必需。 遵循材料设计准则,必填字段带有星号(*)。 如果您删除了英雄名称,表单将以吸引人注意风格显示验证错误: ?...这很好地描述了英雄类与三个必填字段(id, name, power)和一个可选字段(alterEgo)。...如果您忽略原始状态,只有在该有效时才会隐藏该消息。 如果您使用新(空白)英雄或无效英雄到达此组件,则在您执行任何操作之前,您将立即看到错误消息。...如果需要,可以将相同类型错误消息添加到,但这不是必须,因为选择框已经将权限限制为有效。...文本字段变为空白,如果您更改了power,它将恢复默认。 用ngSubmit提交表单 用户应该能够在填写表单后提交这个表单。

17.5K30

Thrift接口定义语言

如果未提供常量值,第一个元素 0,或者任何后续元素都大于前一个。 提供任何常量值都必须是非负数。...读取:必填字段始终被读取,并应包含输入。 默认:始终写入 如果在读取期间缺少必填字段预期行为是向调用者指示不成功读取操作,例如 通过抛出异常或返回错误。...由于这种行为,必填字段极大地限制了有关软版本控制选项。 因为它们必须在读取时出现,所以不能弃用这些字段如果将删除必填字段(或更改为可选字段),数据在版本之间不再兼容。...默认:设置 isset 标志时写入 大多数语言实现使用所谓“isset”标志推荐做法来指示是否设置了特定可选字段。 仅写入设置了此标志字段,相反,仅当从输入读取字段时才设置该标志。...相反,如果将默认写入输出数据, IDL 默认可以随时更改,而不会影响序列化数据。 XSD 选项 注意:这些在 Facebook 有一些内部用途,但在 Thrift 没有当前用途。

1.4K40
  • Angular 表单3--响应式表单 复杂验证

    表单验证是前端开发重要并且常见工作 比如下面的表单包含三个字段: 验证要求: name: 必填 Category: 必填,只能输入大小写,字符长度3到10 Price:必填,只能输入不超过...image.png 我们可以借助AngularformControl来实现,这里我们基于FormControl创建一个子类ProductFormControl来提高可复用性 核心代码: form.model.ts...只包含一个收集表单错误信息方法 import { FormControl, FormGroup, Validators } from "@angular/forms"; // 自定义验证器 import...actualValue": val}}; } else { return null; } } } } 最后在用到组件...,直接引入 form.model import { Component } from "@angular/core"; import { NgForm } from "@angular/forms";

    2.5K30

    Angular17 使用 ngx-formly 动态表单

    -g @angular/cli # 创建 standalone 类型项目 ng new angular-ngx-formly --standalone=false 安装 NG-ZORRO 组件库...,在不同场景可以考虑不同自定义方式; 使用 Formly 内置验证: 在新用户注册表单基础上增加输入年龄字段配置,再为每个字段配置 props 增加 required 属性,表示这是一个必填字段...label}格式不正确`, }, }, } 自定义携带选项验证函数: 在前面邮箱定义验证函数使用了一个比较通用正则,如果在实际使用时除了直接修改验证函数正则外,还可以通过第三个选项参数实现验证范围缩小...隐藏/显示字段如果需要使前面加入的确认密码字段输入密码字段后才显示时就需要使用 expressions.hide 来控制隐藏或显示: { key: 'checkPassword', type...label 字段如果在前期考虑不好的话容易造成后期维护困难,这里就可以考虑通过自定义扩展在生成动态表单前自动匹配 label 字段

    63710

    angularjs学习第四天笔记(第一篇:简单表单验证)

    您好,我是一名后端开发工程师,由于工作需要,现在系统从0开始学习前端js框架之angular,每天把学习一些心得分享出来,如果有什么说不对地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家点评与赐教...第四天,简单表单验证,今天主要学习了angularjs表单验证一些基本概念及其简单应用  第一、表单验证简单理解     表单验证是angularjs中比较重要一个核心功能     表单验证可以结合...,使用ng-pattren="模式匹配正则表达式"     5.邮箱:email,使用直接给文本框type属性赋值email即可--type="email"     6.数字:number,使用直接给文本框...type属性赋值number即可--type="number"     7.网页地址:url,使用直接给文本框type属性赋值url即可--type="url"   第四、表单控制变量...    1.表单属性访问方式:表单名称.文本框名称.属性名称     2.表单验证中用到表单属性包括如下:       未修改表单:属性名称关键词【pristine】,bool类型,如果修改为

    1.7K10

    angularjs学习第四天笔记(第一篇:简单表单验证)

    您好,我是一名后端开发工程师,由于工作需要,现在系统从0开始学习前端js框架之angular,每天把学习一些心得分享出来,如果有什么说不对地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家点评与赐教...第四天,简单表单验证,今天主要学习了angularjs表单验证一些基本概念及其简单应用  第一、表单验证简单理解     表单验证是angularjs中比较重要一个核心功能     表单验证可以结合...,使用ng-pattren="模式匹配正则表达式"     5.邮箱:email,使用直接给文本框type属性赋值email即可--type="email"     6.数字:number,使用直接给文本框...type属性赋值number即可--type="number"     7.网页地址:url,使用直接给文本框type属性赋值url即可--type="url"   第四、表单控制变量...    1.表单属性访问方式:表单名称.文本框名称.属性名称     2.表单验证中用到表单属性包括如下:       未修改表单:属性名称关键词【pristine】,bool类型,如果修改为

    1.3K20

    SAP S4 HANA业务伙伴工具集(BDT)

    o数据输入PAI事件。检查输入。日期转换 注:在没有对话框维护模式下执行相同编码(例如直接输入)。没有冗余编码。事件BDT在对话框流中使用固定事件。...2 视图被分配给要维护对象 子屏幕流程逻辑 1 在PBO调用功能模块BUS_PBO(字段修改,消息) 2 在PAI调用功能模块BUS_PAI(确定光标位置) 数据集特殊重要性另一个有趣点是如何处理角色和技术元素之间连接...另一个功能是通过单击特定屏幕名称、视图名称、节名称……直接从BDT Analyzer导航到定制设置……字段字段组表示具有强关系字段集合。请记住,字段修改基于字段组。...这意味着如果字段组设置必填属于该字段所有字段都是必填(类似于基于帐户组字段修改)。功能模块CVIV_BUPA_EVENT_FMOD2_ENH负责字段状态确定(隐藏、可选、强制)。...您可以看到分配给字段组33793个字段: SPERQ_TXT–字段描述文本字段 GS_LFA1-SPERQ–技术屏幕字段输入字段),通过导航到视图CVIV60屏幕绘制器,您可以看到技术屏幕字段

    48830

    Angularjs表单验证

    下面来看看我们可以在input设置哪些验证: 必填 验证是否已输入文字,只需在标签上加上required: 最小长度 验证至少输入{number...当然,如果想要设置特定class时,他们也是非常有用。 错误 另一个有用属性是AngularJS提供$error对象。这个对象包含每一个无效input验证集合。...$error 如果验证失败,此属性将是true(因为length>0)。 控制验证时样式 当AngularJS处理验证时,它将根据验证状态增加一些特定class属性。...这些验证分别是:必须有一个长度3或更多名字。并且最大长度限制为20个字符。最后,名称应该是必填。 让我们用属性来控制显示还是隐藏错误信息。...点击提交后显示验证信息 要在用户试图提交表单时显示验证,你可以通过在scope设置一个'submitted',并检查该来控制显示错误。 让我们来看看第一个例子,只有在点击提交表单时才显示错误。

    2.2K10

    AngularDart Material Design 输入

    如果真,它会“漂浮”在输入之上。 hintText String  要在输入上显示提示。 如果输入上有错误消息,则不会显示此文本。...如果是“list”或“both”,inputAriaHasPopup应设置“true”。...如果没有在文本框输入任何内容,显示默认文本。当用户输入文本时,它会消失。...如果false,则在文本输入时标签会消失。如果真,它会“漂浮”在输入之上。 hideCheckbox bool  是否隐藏选择项之前复选框以进行多选。...将此设置true会更改行为,以便在更改选项或选项时:       1.选择第一个选定在选项中有效       2.如果选择没有选定选项没有任何活动 inputText String

    5.3K40

    实例讲解PHP表单

    此数组包含键/对,其中键是表单控件名称,而是来自用户输入数据。 2 GET 和 POST 被视作 _GET 和 _POST。..._POST 是通过 HTTP POST 传递到当前脚本变量数组。 (1)何时使用 GET? 通过 GET 方法从表单发送信息对任何人都是可见(所有变量名和都显示在 URL )。...通过 POST 方法从表单发送信息对其他人是不可见(所有名称/会被嵌入 HTTP 请求主体),并且对所发送信息数量无限制。...必填字段 验证 E-mail 和 URL 1.验证名字 以下代码展示简单方法检查 name 字段是否包含字母和空格。...如果 name 字段无效,存储一条错误消息: $name = test_input($_POST["name"]); if (!

    7.2K20

    C# Web控件与数据感应之属性统一设置

    比如是否必填写项设置,以便于统一操作。...实际业务,如不同用户类型,相同注册界面,则可考虑某些输入必填写属性变化,如没有工作单位则无须填写现工作单位和参加工作时间,反之在职人员必须填写(图中标签带有*号均为必填写项提示性标志...根据统一属性设置,可以显示如下图: 图中现工作单位和参加工作时间前面的*号不存了,表示必填写项,以避免输入“无” 字来“绕” 过检查。...,其参数设置见下表: 序号 参数名 类型 说明 1 HasTitle bool 数据集是否包含列名,如果包含数据输出从第2行开始 2 cfg ArrayList 必须,一个配置参数列表,每一个项一个一维字符串数组...) (2)4个情况,如 new string[]{ "l_", "","x_","*" } ,前2个可以设置空略过,后两个必填写项设置,第4个必填写项提示字符前缀,如“*”号 方法中会用到

    10810

    AngularDart4.0 指南- 模板语法一 顶

    Angular早期教程,你遇到了插双曲括号{{and}}。... 模板上下文字段优先于组件上下文字段。 在上面的deleteHero(hero),hero是模板输入变量,而不是组件hero属性。...当用户在输入输入“Sally”时,DOM元素属性变为“Sally”。...这样输入映射到指令自己属性。 如果名称未能匹配已知指令或元素(property)属性,Angular会报告“未知指令”错误。 避免副作用 如前所述,模板表达式评估必须没有可见副作用。...返回适当类型 模板表达式应通过目标属性计算预期类型: 如果目标属性需要一个字符串,返回一个字符串。 如果目标属性期望一个数字,返回一个数字。 如果目标属性需要一个对象,返回一个对象。

    5.2K10

    【译】如何在 Spring 中将 @RequestParam 绑定到对象

    该注解另一个有用特性是可以将给定参数标记为必填项。如果请求缺少必填参数,我们端点可以拒绝它。 要在使用 POJO 时达到相同效果(甚至更多!)我们可以 使用 bean 验证。...如果你只是想 模仿 @RequestParam(required = true) 行为,你需要只是 在必填字段上加上 @NotNull 注解。...@RequestParam 注解另一个有用特性是,当 HTTP 请求没有参数时,可以定义默认。...当我们有一个 POJO 时,不需要任何特殊魔法。你只需要直接字段指定默认。当请求缺少参数时,不会有任何东西覆盖预定义。...请注意,当嵌套对象字段 null 时,Spring 不会验证其属性。如果所有嵌套属性都是可选,那么这可能是预期解决方案。如果不是,则需在嵌套对象字段上放置 @NotNull 注解。

    46310

    【分享】在集简云上架应用如何设置动作字段参数?

    同时,接口调试{{input.data.xxx}}”xxx"部分为字段key,例如如果字段key:phone_number, 接口调试如需要引用此字段,可以输入{{input.data.phone_number...}}字段名称:在前端展现给用户字段名称,例如用户名,非必填如果不填写则以字段key做为字段名称字段说明:非必填,在前端展现给用户,用于说明改字段内容如何填写,我们建议填写字段说明例如格式示例,特别是日期时间类型字段...字段类型:字段类型决定此字段字段在接口中以什么格式请求,如果是文本,多行文本则以文本格式请求,如果是数值,浮点则以数值格式请求。...是否允许填写多个:如果勾选则用户在前端可以点击”+”, 添加多个此字段:是否动态字段如果勾选当此字段字段在前端变化时会请求接口刷新字段列表。...是否有下拉选项:如果勾选字段将设置下拉选择字段. 下拉选项有两种:动态选项与固定选项动态选项: 下拉列表选项不是固定,需要请求接口获取,例如:企业部门成员列表。

    1.1K10

    JeecgBoot低代码平台—默认模糊查询以及高级查询规则

    2、查询规则 说明:页面查询字段,需跟后台ControllerPage字段对应一致,后台不需写代码自动生成查询条件SQL; 默认查询条件是全匹配,想实现模糊查询需求在查询前后加: \*...(只有一个叹号); 5.范围查询,支持数字,时间范围查询,针对范围查询页面会生成两个查询控件 1. 如果是单一匹配方式,页面查询控件name, 跟实体字段命名一样 2....如果是范围匹配方式,页面查询控件需要变成两个分别名 {*}_begin,{*}_end {*}_begin: 表示查询范围开始 {*}_end: 表示查询范围结束 举例: 字段名称 orderDate...查询该字段不等于输入数据 (数值类型不支持此种查询,可以将数值字段定义字符串类型) in查询 若传入数据带,(逗号) 表示该查询in查询 in查询...查询内容规则:"ge+ 空格+ 内容" 输入: “ge 100” 范围匹配方式,页面查询控件需要变成两个分别名 {}_begin,{}_end {}_begin: 表示查询范围开始 {}_end

    1.6K40

    Angular 16 正式版发布

    几个月前,我们回应说要支持这个特性框架一部分,我们很高兴与大家分享,今年晚些时候,我们将推出一项功能,该功能将启用基于信号输入——你将能够通过interop包将输入转换为可观测。...4.1 输入必填(Required inputs) 自从我们在 2016 年引入 Angular 以来,如果不为特定输入指定,就不可能出现编译时错误。...在 v16 ,可以根据需要标记输入 required : @Component(...) export class App { @Input({ required: true }) title:...: string; } 4.3 CSP 对内联样式支持 Angular 在组件样式 DOM 包含内联样式元素违反了默认 style-src 内容安全策略(CSP) 。...如果您有权访问服务器端模板, ngCspNonce 属性非常有用,该模板可以在构造响应时将 nonce 添加到标头和 index.html

    2.5K10

    MySQL 到 Hazelcast Cloud 实时数据同步实操分享

    数据库连接是以一个 db 一个数据源。...Connection Name:设置连接名称,多个连接名称不能重复 Cluster Name: database_name, string, 输入框, 必填 Token:plain_password...根据数据需求,选择需要同步库、表,如果你对表名有修改需要,可以通过页面表名批量修改功能对目标端表名进行批量设置。 点击任务名称可以打开任务详情页面,可以查看任务详细信息。...如果觉得不够用,也可以选择表全字段校验 ,这个除了要选择待校验表外,还需要针对每一个表设置索引字段。 在进行表全字段校验时,还支持进行高级校验。...还有一个校验方式关联字段校验 ,创建关联字段校验时,除了要选择待校验表外,还需要针对每一个表设置索引字段

    1K31
    领券