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

使用formArray Angular8从选择的选项中获取开始时间和结束时间值

Angular是一种流行的前端开发框架,它提供了一种简单而强大的方式来构建Web应用程序。在Angular中,formArray是一种表单控件,用于处理动态生成的表单字段。您可以使用formArray来获取选择的选项的开始时间和结束时间值。

首先,您需要在Angular应用程序中创建一个formArray。您可以使用Reactive Forms模块来实现这一点。在组件的初始化方法中,您可以使用FormBuilder来创建一个formArray,并为其添加所需的表单控件。

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

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

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      timeRange: this.formBuilder.array([])
    });
  }

  get timeRange(): FormArray {
    return this.form.get('timeRange') as FormArray;
  }

  addTimeRange() {
    this.timeRange.push(this.formBuilder.group({
      startTime: '',
      endTime: ''
    }));
  }

  removeTimeRange(index: number) {
    this.timeRange.removeAt(index);
  }
}

在上面的代码中,我们创建了一个名为timeRange的formArray,并定义了两个表单控件startTime和endTime。我们还添加了两个方法addTimeRange和removeTimeRange,用于动态添加和删除timeRange中的表单控件。

接下来,在模板文件中,您可以使用ngFor指令来循环遍历timeRange,并为每个表单控件创建相应的输入框。

代码语言:txt
复制
<form [formGroup]="form">
  <div formArrayName="timeRange">
    <div *ngFor="let time of timeRange.controls; let i = index" [formGroupName]="i">
      <label>Start Time:</label>
      <input type="text" formControlName="startTime">
      <label>End Time:</label>
      <input type="text" formControlName="endTime">
      <button (click)="removeTimeRange(i)">Remove</button>
    </div>
  </div>
  <button (click)="addTimeRange()">Add Time Range</button>
</form>

在上面的代码中,我们使用formArrayName指令将formArray绑定到模板中的timeRange。然后,我们使用ngFor指令循环遍历timeRange.controls,并为每个表单控件创建输入框。我们还添加了一个按钮,用于添加新的时间范围。

现在,当用户选择选项并输入开始时间和结束时间时,您可以通过访问formArray的值来获取这些值。您可以在组件中添加一个方法来处理这些值。

代码语言:txt
复制
submitForm() {
  const timeRanges = this.timeRange.value;
  console.log(timeRanges);
}

在上面的代码中,我们使用timeRange.value来获取formArray的值,并将其打印到控制台上。

这是使用formArray Angular 8从选择的选项中获取开始时间和结束时间值的完整示例。请注意,这只是一个示例,您可以根据您的需求进行修改和扩展。

关于Angular和formArray的更多信息,您可以参考以下链接:

  • Angular官方网站:https://angular.io/
  • Angular Reactive Forms指南:https://angular.io/guide/reactive-forms
  • Angular FormArray文档:https://angular.io/api/forms/FormArray
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

PHP 获取指定年月日开始结束时间戳 转

/** * 获取指定年月日开始时间结束时间戳(本地时间戳非GMT时间戳) * [1] 指定年:获取指定年份第一天第一秒时间下一年第一天第一秒时间戳 * [2] 指定年月:获取指定年月第一天第一秒时间下一月第一天第一秒时间戳...* [3] 指定年月日:获取指定年月日第一天第一秒时间戳 * @param integer $year [年份] * @param integer $month [月份]...end_day_formated." 00:00:00") - 1; return array('start' => $startTimestamp, 'end' => $endTimestamp); } 使用例子如下所示...1469980800 [end] => 1472659199 ) Array ( [start] => 1475164800 [end] => 1475251199 ) 以上就是PHP 获取指定年月日开始结束时间全文介绍...,希望对您学习使用php有所帮助.

2.6K20

Linux系统时间获取使用

本文将给大家详细介绍关于Linux时间获取使用,下面话不多说了,来一起看看详细介绍吧 获取时间戳 time() #include time_t time(time_t *calptr...该函数返回向buf指向字符串中放置字符数。 函数strftime()操作有些类似于sprintf():识别以百分号(%)开始格式命令集合,格式化输出结果放在一个字符串。...格式化命令说明串 strDest各种日期时间信息的确切表示方法。格式串其他字符原样放进串。格式命令列在下面,它们是区分大小写。...,使用基于周年 %w 十进制表示星期几(0到6,星期天为0) %W 每年第几周,把星期一做为第一天(0到53) %x 标准日期串 %X 标准时间串 %y 不带世纪十进制年份...clock函数 clock函数提供了一个简单接口用于取得进程时间,它返回一个描述进程使用CPU时间(包括用户时间内核时间),该函数定义如下: #include clock_t

4.1K21

Linux系统时间获取使用

本文将给大家详细介绍关于Linux时间获取使用,下面话不多说了,来一起看看详细介绍吧 获取时间戳 time() #include <time.h time_t time(time_t *calptr...该函数返回向buf指向字符串中放置字符数。 函数strftime()操作有些类似于sprintf():识别以百分号(%)开始格式命令集合,格式化输出结果放在一个字符串。...格式化命令说明串 strDest各种日期时间信息的确切表示办法。格式串其他字符原样放进串。格式命令列在下面,它们是区分大小写。...,使用基于周年 %w 十进制表示星期几(0到6,星期天为0) %W 每年第几周,把星期一做为第一天(0到53) %x 标准日期串 %X 标准时间串 %y 不带世纪十进制年份...clock函数 clock函数提供了一个简单接口用于取得进程时间,它返回一个描述进程使用CPU时间(包括用户时间内核时间),该函数定义如下: #include <time.h clock_t

4.2K20

WinCC 如何获取在线 表格控件数据最大 最小时间

1 1.1 <读取 WinCC 在线表格控件特定数据列最大、最小时间戳,并在外部对 象显示。如图 1 所示。...左侧在线表格控件显示项目中归档变量,右侧静态 文本显示是表格控件温度最大、最小相应时间戳。 1.2 <使用软件版本为:WinCC V7.5 SP1。...创建两个文本变量 8 位字符集类型变量 “startTime”“endTime”,用于设定在 线表格控件开始时间结束时间。如图 2 所示。...6.在画面配置文本域输入输出域 用于显示表格控件查询开始时间结束时 间,并组态按钮。用于执行数据统计和数据读取操作。如图 7 所示。...项目激活后,设置查询时间范围。如图 10 所示。 2. 点击 “执行统计” 获取统计结果。如图 11 所示。 3.最后点击 “读取数据” 按钮,获取最大、最小时间戳。

9K10

Angular8稳定版修改概述

这允许在现代用户代理旧用户代理经典脚本中选择性地执行模块脚本. SVG作为模板 您现在可以将SVG文件用作模板。到目前为止,我们只能选择使用内联HTML或外部HTML作为模板。...Bazel将提供以下优势: 更快构建时间(对于第一次构建需要时间,但并发构建将更快),Angular已经在使用它,现在CI在7.5分钟内完成,而不是在Bazel之前60分钟。...angular使用builders进行主要操作:serve ,build ,test ,linte2e 。您可以在angular.json文件查看使用构建器。 ......弃用API @angular/platform-browser删除了已弃用DOCUMENT @angular/platform-browser移除了DOCUMENT。...现在它已从包列表删除。 配置ViewChild / ContentChild查询时间 使用此功能时,必须提供静态标志以定义何时需要解析ViewChildContentChild实例。

4.5K20

全面解析C#异步编程为什么要异步过去糟糕体验一个新方式Tasks基于任务异步编程模型Asyncawait时间处理程序无返回异步方法结束

在.NET Framework5.0种,微软为我们系统了新语言特性,让我们使用异步编程就像使用同步编程一样相近简单,本文中将会解释以前版本Framework基于回调道德异步编程模型一些限制以及新型...而在如今.NET,提供了非常接近于同步编程编程体验,不需要开发人员再去处理只会在异步编程中出现很多情况,异步调用将会是清晰且不透明,而且易于同步代码进行组合使用。...恐怕不能,我们开始只是想同步方法那样只是用一个异步调用来替换阻塞调用,让它包装在一个foreach循环中,想想一下试图去组合更多异步调用或者有更复杂控制结构,这不是一个SubPageSizesAsync...时间处理程序无返回异步方法 异步方法可以其他异步方法使用await创建,但是异步在哪里结束?...这就是通常所说“发后既忘” 为了适应这种模式,异步方法通常明确被设计为“发后既忘”-使用void作为返回替代Task类型,这就让方法可以直接作为一个事件处理程序。

2.3K60

Angular系列教程-第四节

两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改途径 使用’@angular/forms’库FormGroup, FormControl,FormArray...,FormBuilder 等类构建出数据对象就是响应式表单,在响应式表单,我们会在数据源里面进行各种操作,像添加校验等,在html文件中使用 formGroup,formGroupName,formControlName...总结 响应式表单是动态,模板驱动表单是固定 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件获取setvalue...更新) formgroup使用 表单提交 更新部分内容(patchValue) 表单验证(导入Validators,设置字段属性) 表单状态(status) formarray(管理任意数量控件...) 表单验证 同步验证器异步验证器 备注:同步验证先执行,异步验证后执行 3.模板驱动表单使用 导入formcontrol 使用ngModel实现双向绑定 使用模板变量来获取表单 4

2.8K50

使用Angular8百度地图api开发《旅游清单》

我们将收获: Angular8基本用法,架构 使用百度地图API实现自己地图应用 解决调用百度地图API时跨域问题 对localStorage进行基础封装,进行数据持久化 material...UI使用 项目简介 《旅游清单》项目的背景主要是为了让笔者更好掌握angular8,因为之前做项目主要是使用vuereact,作为一名合格coder,必须博学而专一,也是因为笔者早年大学时期想要做一个想法...项目的首页展示是已去过旅游地点路线,地图路线是通过调用百度地图api实现,当然提供这样api很多,大家可以根据自己喜好去使用。其次我们可以在首页添加未来旅游规划预算,方便后面使用。...根模块提供了用来启动应用引导机制。一个应用通常会包含很多功能模块。 组件 每个 Angular 应用都至少有一个组件,也就是根组件,它会把组件树页面 DOM 连接起来。...Router 模块提供了一个服务,它可以让你定义在应用各个不同状态视图层次结构之间导航时要使用路径。

6K30

WINCC通过生产批次名称来进行批次数据过滤查询组态编程方法

那么也就意味着只要能够在 WinCC 归档批次名称同时,将该批次开始生产时间以及结束生产时间与批次名称一同进行归档。...当选择了需要查询批次名称时候也就能够获取到该批次生产起始以及结束时间,再根据这两个时间即可过滤查询出该批次生 产过程归档所有历史数据。...该过程归档用于记录批次名称以及批次生产开始结束时间。 如图 03 在变量记录创建过程归档“batchDatas”,并在该归档添加归档变量“data1”、“data2”、“data3”。...如图 11,表格控件 Properties ,取消选择时间选项“刷新”。...然后点击“开始批次生产”按钮启动生产。此时“开始时间”会自动显示当前批次开始生产时间。当生产完成后,点击“结束批次生产”按钮来停止生产。此时“结束时间”会自动显示当前批次结束生产时间

14010

通过案例带你轻松玩转JMeter连载(27)

Ø 遇到文件结束再次循环?:到了文件结尾是否循环。默认为True。True表示继续文件第一行开始读取;False表示不再循环。此项与下一项设置为互斥关系。 Ø 遇到文件结束停止线程?...获取了5条数据,由于选择遇到文件结束不停止线程,所以最后一条数据出现错误。 图44 循环次数为5,遇到文件结束再次循环,选择遇到文件结束不停止线程 选择遇到文件结束停止线程?为True。...获取了5条数据,由于选择遇到文件结束停止线程,所以循环了5次就结束了。 图45 循环次数为5,遇到文件结束再次循环,选择遇到文件结束停止线程 Ø 线程共享模式。...如果当前连接池中某个连接在空闲了Time Between Eviction Runs Millis时间后任然没有使用,则被物理性关闭掉。默认为默认:60000,即1分钟。...计数器配置允许用户配置起点、最大增量。计数器将从开始循环到最大,然后开始重新开始,这样继续,直到测试结束。计数器使用长字符存储,因此范围为-2^63到2^63-1。

1.8K10

手写RPC框架指北另送贴心注释代码一套

Angular8正式发布了,Java13再过几个月也要发布了,技术迭代这么快,框架复杂度越来越大,但是原理是基本不变。所以沉下心看清代码本质很重要,这次给大家带来是手写RPC框架。...RPC框架通信选择有很多:kyro/thift/json/hessian/protobuf/xml等等,为了快速实现RPC框架,节省生成桩函数时间成本,所以本文采用了阿里fastjson。...zookeeper 提供服务发现与注册。一个服务会有多个实例,所以我们选用zookeeper作为注册中心,在调用时,zookeeper获取服务实例列表,再从中选择进行调用。 3....RPC实现流程 消费者端流程: 代理服务接口 服务发现(连接zookeeper,获取生产者列表) 远程调用(轮询生产者服务列表),将类名,方法名参数等信息通过代理发送给生产者端 生产者端流程: 加载需要远程调用服务...,并缓存 启动通讯服务器(Netty) 服务注册(把通信地址放入zookeeper) 收到消息后使用反射,本地调用方法并将执行结果编码返回给消费者端 在调用链路中断点,就可以同时了解RPC通信原理Netty

62930

UA Expert—一个功能齐全OPC UA客户端

历史插件将显示在中心窗格,由两个主要组组成,配置历史数据视图显示与所要求时间框架相关图形趋势视图中。...历史趋势视图支持 UA 服务器获取数据两种模式、单次更新和循环更新。 对于单次更新,您需要指定由开始结束日期/时间定义时间框架,Ua 专家在按下"更新"按钮时将执行原始历史读取。...在循环更新模式下,您必须指定时间跨度(从现在开始向后) UaExpert 应获取新数据间隔。...按下"开始"按钮时,Ua 专家将循环(间隔)执行历史读取原始使用现在作为结束时间现在时间跨度结束时间。这将给出一个典型图表记录器使用案例。...Ua 专家将致电 UA 服务,并测量每次呼叫持续时间。或者,您可以选择持续时间选项

17.9K20
领券