首页
学习
活动
专区
工具
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.7K20

    WinCC 中如何获取在线 表格控件中数据的最大值 最小值和时间戳

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

    9.7K11

    Angular8稳定版修改概述

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

    4.5K20

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

    在.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,因为之前做的项目主要是使用vue和react,作为一名合格的coder,必须博学而专一,也是因为笔者早年大学时期想要做的一个想法...项目的首页展示的是已去过的旅游地点和路线,地图路线是通过调用百度地图api实现的,当然提供这样的api很多,大家可以根据自己的喜好去使用。其次我们可以在首页添加未来的旅游规划和预算,方便后面使用。...根模块提供了用来启动应用的引导机制。一个应用通常会包含很多功能模块。 组件 每个 Angular 应用都至少有一个组件,也就是根组件,它会把组件树和页面中的 DOM 连接起来。...Router 模块提供了一个服务,它可以让你定义在应用的各个不同状态和视图层次结构之间导航时要使用的路径。

    6K30

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

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

    29610

    通过案例带你轻松玩转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

    65130

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

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

    19.1K20

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

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

    4.1K11
    领券