将日期绑定到Angular7中的formControlname输入
将日期绑定到Angular 7中的formControlName输入可以通过使用Angular的内置日期选择器和表单控件来实现。以下是一个完整的答案：
在Angular 7中，可以使用Angular Material库中的日期选择器来绑定日期到formControlName输入。首先，确保已经安装了Angular Material库，并在项目中导入所需的模块。
- 安装Angular Material库：
- 安装Angular Material库：
- 在app.module.ts文件中导入所需的模块：
- 在app.module.ts文件中导入所需的模块：
- 在组件的HTML模板中，使用matInput指令和matDatepicker指令来创建日期选择器：
- 在组件的HTML模板中，使用matInput指令和matDatepicker指令来创建日期选择器：
- 在组件的TypeScript文件中，创建一个FormControl对象并将其与formControlName绑定：
- 在组件的TypeScript文件中，创建一个FormControl对象并将其与formControlName绑定：
这样，日期选择器就与formControlName输入绑定起来了。用户选择日期后，选择的日期值将自动存储在FormControl对象中。
对于日期绑定的优势是，它提供了一个用户友好的日期选择器，使用户能够轻松选择日期。此外，通过使用FormControl对象，可以轻松地获取和处理所选日期的值。
应用场景包括但不限于：
- 在表单中收集用户的生日或其他日期信息。
- 在预订系统中选择入住和离店日期。
- 在日历应用程序中选择特定日期。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网通信（IoT Hub）：https://cloud.tencent.com/product/iothub
- 腾讯云移动推送（Xinge Push）：https://cloud.tencent.com/product/tpns
- 腾讯云区块链服务（Tencent Blockchain）：https://cloud.tencent.com/product/tbc
- 腾讯云元宇宙（Tencent Metaverse）：https://cloud.tencent.com/product/metaverse
请注意，以上链接仅供参考，具体产品选择应根据实际需求和项目要求进行评估和决策。
相关·内容
我正在使用angular7，我尝试在文本框中显示值，我从后端获得值，但是我不知道如何在文本框中显示值，有人能给我建议吗？
我在使用回收站和angular7
file.component.ts
ngOnInit() {
let userId = window.localStorage.getItem("editUserId");
if(!userId) {
alert("Invalid action.")
this.router.navigate(['list-user']);
return;
}
alert(userId)
th
浏览 0提问于2019-04-05得票数 1
我正在创建Angular7动态表单，这个表单包含一个下拉列表。此下拉列表具有options属性。我想从数据库中填充这个属性。但是在正式的角度动态表单文档中，在创建输入时将值插入到options属性中。
我试过这个：
this.formComponent.form.controls['currencyId'].patchValue([{value: '076398a7-ea74-431c-9c63-121af6fe0f2f', label: 'deneme'}]);
new InputDropdown({
key: 'parentJob
浏览 1提问于2019-08-09得票数 0
回答已采纳
我希望我的表单日期输入字段在打开表单时显示今天的日期，例如(2019-11-28)。我看到了许多关于它在AngularJs中如何工作的例子，但是如何使用反应性形式获得日期。
表单
//.....
<div class="form-group">
<label>Date:</label>
<div class="input-group">
<input type="date" class="form-control col-md-8" formCo
浏览 3提问于2019-11-28得票数 3
回答已采纳
2回答
我有用于编辑用户信息的表单： <form [formGroup]="editUSer">
<input formControlName="name">
<select formControlName="roleName">
<option *ngFor="let item of listRole">{{item.name}}</option>
</select>
</form> 在表单中对setvalue使用此代码： this.editU
浏览 16提问于2019-04-16得票数 0
回答已采纳
我收到这个“无效日期”错误。当我使用bsDatePicker设置日期时，表单值显示 "startDate": "2019-02-08T08:57:12.000Z" 并且日期输入正确地显示为"08.02.2019“。 将它发送到服务器是可行的，但是在刷新页面之后，输入显示为Invalid date，表单值显示为 "startDate": "2019-02-07T22:00:00.000+0000" 甚至看起来好像这一天不太对劲。 在PostgreSQL中(使用pgAdmin 4查看数据)，start_data字段显示为20
浏览 20提问于2019-02-12得票数 0
我使用ng-pick-date-time。我需要从日期-时间选择器输入中获取日期和时间。
我收到的日期的值是'Mon Sep 30 2019 11:11:54 GMT+0200 (中欧夏季时间)‘。
我如何解析这个值？是否有属性设置此值格式？
<input class="text size200 calendarClass" [owlDateTime]="dt1" name="validityPeriodEndDate" formControlName="validityPeriodEndDate" re
浏览 0提问于2019-09-30得票数 0
我试图将一个组件(例如，称为custom-input)封装为一个基于角材料组件的formControl元素，以包含以下内容：
<mat-form-field >
<input
matInput
[formControl]="inputField"
formControlName="{{ name }}"
name="{{ name }}"
maxlength="{{ maxlength }}"
placeholder="{{ name | transla
浏览 2提问于2019-02-25得票数 3
1回答
我有一个模板驱动的表单与只读输入。当用户单击输入时，会出现一个日期选择器。用户选择日期后，输入字段将被信息填充。但是，当我单击submit时，该输入中没有数据。不过，其他的领域也在工作。所以在这个例子中，我得到一个输出
控制台输出：
对象{refNumber："215170"，日期：""}
HTML代码：
<form [formGroup]="myForm" novalidate (ngSubmit)="onSubmit(myForm)">
<div class="form-group&
浏览 1提问于2017-01-23得票数 0
回答已采纳
你好，我有这个代码：
<input type="radio" value="{{commencementDate.value}}" id="bankCommencementDateSelect" formControlName="bankCommencementDate">
<input #commencementDate id="bankCommencementDateInput" formControlName="bankCommencementDateInput" type
浏览 0提问于2017-11-07得票数 0
2回答
当我使用反应性表单并试图在多个输入中访问相同的控件时，它看起来只是一个单向数据绑定(输入到模型)。如果我编辑一个输入，它将正确地更新模型，但它也不会刷新其他输入。
<input type="text" formControlName="test" id="in1">
<input type="text" formControlName="test" id="in2">
我的工作是在两个输入中添加以下一行：
(change)="form.controls.test.se
浏览 0提问于2018-03-27得票数 3
回答已采纳
我有一个用于日期筛选的表单，我尝试为日期输入的开始日期和结束日期设置默认值。
<form [formGroup]="filter" (ngSubmit)="applyFilter()">
<mat-form-field>
<input matInput [matDatepicker]="start" formControlName="start" placeholder="Начальная дата">
<mat-datepicker-toggle mat
浏览 2提问于2018-09-10得票数 3
1回答
我在表单上有一个输入字段如下：
<mat-form-field>
<input formControlName="dateFormCtrl" matInput [matDatepicker]="picker" [max]="maxDate" [min]="minDate" placeholder="When is your event?"
(cli
浏览 0提问于2018-03-15得票数 0
在对两个角形模块(FormsModule和ReactiveFormsModule)进行逆向工程之后，我将ngModel的三种用途作为指令中的输入。
在FormsModule中，在 ngModel 指令中只使用NgModel一次。'ngModel:not(formControlName):not(formControl)').是指令选择器的一部分(选择器: ngModel )因此，对于NgModel指令，ngModel有两个角色。这是一个输入，同时也是一个选择器。
在ReactiveFormsModule中，ngModel被使用了两次。第一个用法是在FormControlDire
浏览 8提问于2017-10-23得票数 1
回答已采纳
在一个Angular7应用程序中，我使用以下html代码捕获了一个数字输入的KeyUp事件：
<input fxFlex
type="number"
formControlName="DM"
(keyup)="changeDM()">
</div>
我使用debounceTime(500)来延迟对处理表单的服务的调用。我写了一个1，2，3，4...数字号码，我看到debounceTime(500)工作正常，但它对服务进行了重复调用。看一下代码：
subject: Subject<any
浏览 0提问于2019-03-18得票数 0
如何绑定日期到日期选择器？ const TodayDate = "19-11-2020";
ngOnInit() {
this._MyregisterForm = this.formBuilder.group({
today_Date:[this.TodayDate, [Validators.required]]
});
} HTML <form [formGroup]="_MyregisterForm" (ngSubmit)="onSubmit()">
<input type="date"
浏览 43提问于2020-11-19得票数 0
回答已采纳
我在输入类型date时遇到问题。我想从组件绑定数据。这是我的领域：
<div class="col-md-6">
<label for="dateOfReport">Data zgłoszenia błędu:</label>
<input type="date" formControlName="dateOfReport" id="dateOfReport" class="form-control" [value]="report.
浏览 0提问于2018-04-23得票数 1
我有两个角材料数据启动器，并希望实现以下验证:第一个数据报警器的-The日期必须是第二个数据报警器的最小日期。
这是我的内裤
<mat-form-field appearance="legacy" [style.width.%]="45">
<mat-label>Phasenbeginn</mat-label>
<input matInput placeholder="Beginn" [matDatepicker]="picker" formControlName="pS
浏览 1提问于2020-12-15得票数 1
回答已采纳
2回答
我是第一次在Angular(v7)中使用reactive forms
如果任何字段发生更改，我希望启用我的提交按钮。因此，我正在处理表单的dirty值。对于一个简单的场景，它是有效的。我更改了输入类型文本，按钮变为启用状态。
但是现在我遇到了一个关于元素(<span id="locationUpdated">)的问题，它里面的值被其他javascript函数的结果改变了。
因此，我决定监听以与span元素相同的方式获取值的hidden输入的变化
<form [formGroup]="model.form" >
..
浏览 3提问于2019-09-05得票数 0
5回答
我希望使用反应性表单将2个值连接到1个标签中。在本例中，我不使用ngModel绑定。
<label
id="identificationCode"
name="identificationCode"
formControlName="lblIdCode">______</label>
<input type="text"
浏览 0提问于2019-08-06得票数 3
回答已采纳
我正在尝试在我的一个角6组件的输入字段中设置一个预定义的值。根据一个解决方案，我使用[value]标记来设置值，该标记引用了我的component.ts中的特定@Input字段。但是，当我设置这个值时，它在输入字段中作为[object HTMLInputElement]出现。我已经看到了一些关于香草javascript解决方案的问题，但是我想知道我是否能找到更有角度的解决方案。
html
<div [formGroup]="group">
<div *ngIf="predefined !== undefined; else default"
浏览 0提问于2019-05-17得票数 0
回答已采纳
1回答
我有一个表单控件，它获取日期，但输入没有显示值 <input formControlName="startDate" name="startDate" type="date" class="form-control"> 我通过patchValue确定值，我尝试使用[value]，但不起作用，我试图转换为new Date()，它不起作用 this.form.patchValue({
startDate: data.start,
});
浏览 34提问于2019-10-03得票数 1
回答已采纳
请在下面找到我的问题。
我使用Angular 5 formGroup和ngbDatepicker作为日期输入。日期选择器正在为新的表单工作，请告诉我如何通过formGroup & formControlName将日期绑定到日期选择器。
Angular和Bootstrap的版本: Angular: 5 Bootstrap: 4
浏览 7提问于2018-01-22得票数 1
回答已采纳
1回答
我有一个角度7反应式表单，在这个表单的输入字段是让用户看到和修改时间，然后使用保存()保存回我们的数据库，问题是，用户可以输入任何无意义的数字在这个字段中没有意义的时间。(像小时应该是1-24，分钟1-60)我的问题是，我如何验证什么用户输入到时间字段，如果它有效，那么让保存btn是活动的？
注意:根据我的测试，即使它没有检测到时间条目，但同时试图保存它，它没有保存到数据库，它可能sql不会让这种情况发生。
我用谷歌搜索了一下，但我什么也找不到，而且angular只有电子邮件验证器，你可以在定义表单的时候放进去。
这是我的表单定义
timeForm: FormGroup = new FormG
浏览 8提问于2019-08-06得票数 0
回答已采纳
我有一个http post服务，它想要一个日期和时间，格式如下： YYYY-MM-DDTHH:MM:SSZ 在一种形式中，我现在有一个这样的formGroup： this.formBuilder.group({
name: [''],
startDate: [null],
}) 但在表单中，我有三个输入： <form [formGroup]="myForm">
<input type="text" formControlName="name">
<mat-datepicker formC
浏览 20提问于2021-04-15得票数 0
我无法清除输入框周围的错误大纲和输入框下面的错误信息。当我取消窗体或单击“重置”按钮时，它必须同时清除输入字段和错误消息的内容，但它只清除内容--错误消息未被清除。
我目前使用的是this.formname.reset()，它清除文件，但不清除错误消息。
我正在使用Angular7。
TS文件
loginForm: FormGroup;
validation() {
this.loginForm = this.formBuilder.group({
userName: ['', Validators.required],
浏览 0提问于2019-02-19得票数 0
回答已采纳
5回答
因此，我试图显示这个日期作为输入。但在我的表单生成器组中设置它的值时，它不会显示。我也希望能够把它格式化。
this.post.startDate类型为日期
.ts中的什么？
this.editForm = this.formBuilder.group({
startDate: [this.post.startDate, Validators.compose([Validators.required])],
endDate: [this.post.endDate, Validators.compose([Validators.required])]
});
我的
浏览 0提问于2019-04-12得票数 19
回答已采纳
我使用的是MatDialog，我需要处理输入字段的值，并且还要验证它。
<input matInput [(ngModel)]="name" formControlName="name">
data: {name: this.name, animal: this.animal},
嗯，这给了我一个警告：
看起来，您在与ngModel相同的表单字段上使用formControlName。对于使用带有反应性表单指令的ngModel输入属性和ngModelChange事件的支持已在角v6中被废弃，并将在未来的v6版本中删除。
有关这方面的更多信息，请参见我
浏览 19提问于2022-05-19得票数 1
回答已采纳
我有一个表单的要求与单选按钮和输入框这样。 ? 输入框otherPaymentAmount是必需的。我已经添加了(focus)作为事件来检查该值是否为空或null，然后模糊查看按钮。但是这并没有发生，我错过了什么吗？ 相反，当我将焦点放在输入框上时，我最终启用了查看按钮。 ? component.ts createDefaultForm() {
this.scheduleForm = this._formBuilder.group({
paymentAmount: [null],
otherPaymentAmount: [null, Validat
浏览 25提问于2019-06-10得票数 0
回答已采纳
1回答
我有一个组件，它根据给定的对象显示一些表单字段。通常，该组件在循环中由每次提供新对象的父组件调用，然后子组件根据类型显示正确的元素。
但有时，元素可能是一个可迭代，一个可重复的元素(在FormArray的情况下)。我有以下代码：
<div [formGroup]="form">
<ng-template #formTmpl
let-field="field"
let-index="index">
<pre>index: {{ index
浏览 1提问于2019-06-24得票数 1
回答已采纳
2回答
如何解决服务的“未定义”问题？
、、、、
在每次下拉选项更改时，我都在Angular7中调用服务。但是，当我在下拉列表上更改所选选项时，我得到的是getAllByCountryId of undefined错误。
下面是调用http服务的函数：
countryOnChange(countryId: Guid) {
this.cityService.getAllByCountryId(countryId).subscribe(
res => {
if (res.code === ResponseCode.success) {
res.dataList.map(item =&g
浏览 0提问于2019-08-21得票数 1
2回答
是否有方法检查用户是否超过18岁，当他们进入他们的出生日期使用角度验证器？
我的表格是这样的：
<form [formGroup]="authForm" (ngSubmit)="submitForm()">
<label>Date of birth</label>
<input formControlName="day" maxlength="2" placeholder="DD" type="text" />
<inpu
浏览 5提问于2017-11-27得票数 2
回答已采纳
我在我的项目中使用了角8。
这是我的表格：
<div class="row mt-5">
<div class="col-md-6 mx-auto">
<h2 class="text-center">New fridge</h2>
<div class="card mt-3">
<div class="card-body">
<form [form
浏览 1提问于2019-12-04得票数 0
回答已采纳
1回答
我想在日期选择器(HTML5).When中禁用过去的日期，我使用日期选择器没有任何条件(自发)，禁用日期正在工作。
如果我用带条件的日期选择器，它就不能工作了。我使用jQuery将今天的日期附加到日期元素的"min“属性(使用带有角的jQuery是不好的做法)。因为我找不到如何使用表单控制类型记录访问/追加date元素的属性。(Ex:formname.get(‘formcontrolName’).)
我要挑选日期的人在条件下工作。
浏览 1提问于2018-03-13得票数 0
回答已采纳
我试图在angualr2中禁用基于组件中的"canDisable“变量的反应性输入表单控件。我的代码看起来像这样。
<input type="text" formControlName="CustomerName" Name="CustomerName"
[disabled]="canDisable"/>
不幸的是，它并不像预期的那样起作用
但是，如果我做attr.disabled="canDisable“，它就能正常工作。
<input type="text" formC
浏览 8提问于2017-10-17得票数 4
回答已采纳
我必须对turbo表行使用素数ng p日历，根据周期字段的值，可以有两种不同的日期格式- mm/yy和mm/dd/yy。现在，我已经添加了该控件两次，并根据句点字段条件呈现了如下所示的控件。
<p-calendar *ngIf="Period.length == 15" name="period"
id="period"
selectionMode="range"
view="month"
appendTo="body"
dataType="string"
浏览 15提问于2022-03-08得票数 0
回答已采纳
1回答
我有一个从日期输入中获取日期的FormGroup。
FormControl：
dob: new FormControl(new Date()),
如果没有选择日期，则分配新日期()以获取默认日期。
模板：
<input type="date" formControlName="dob">
但是，当我使用patchValue填充日期(来自先前持久化的对象)时，它不会出现在日期输入标记的文本中(在网页中)。我遗漏了什么？
浏览 0提问于2021-04-08得票数 0
回答已采纳
我试图在动态生成的FormControl上迭代HTML，但是我在输入字段中得到了对象、对象对象。
数据:我得到一个具有以下格式的json字符串：
{
"security_groups": {
"databaseName1": [{
"destination": "10.0.8.1-10.0.8.255",
"ports": "27000-27499",
"protocol": "t
浏览 3提问于2017-02-14得票数 1
1回答
我想显示从开始日期到结束日期之间的周数，有人能告诉我如何做到这一点吗?我使用的是反应性表单模块，我正在接受用户的输入。
我的HTML代码在这里
<div class="my-3">
<label class="form-label" for="Pen_sDate">{{l("sDate")}} *</label>
<input type=&#
浏览 2提问于2022-06-08得票数 0
1回答
我有一个Angular2应用程序，安装了PrimeNG套件。
我需要实现一个带有两个输入元素的表单，并使用它来管理两个日期值。
我试着使用InputMask应用特定的掩码，它可以工作，现在我不知道如何将数据从意大利语格式(由用户提供)转换为类型记录/Javascript格式，以便能够发布数据.
我实现的代码如下：
<p-inputMask mask="99/99/9999" [(ngModel)]="offert.dateDelivery" formcontrolname="dateDelivery" placeholder="dd
浏览 3提问于2017-04-28得票数 0
回答已采纳
在我的角度应用程序，我有3个输入-代码，名称和价格添加更多的按钮在表的末尾，当点击添加更多的按钮，应该有一个重复的行。所有这些都很好，但是我需要获取这个动态框值的值。
下面是代码表：
<form class="form-horizontal" (ngSubmit)="Data(addForm)" [formGroup]="addForm">
<tr *ngFor="let field of fieldArray; let i = index">
<td><input ty
浏览 0提问于2018-05-14得票数 0
回答已采纳
1回答
离子日期时间不显示初始日期。
home.html
<ion-datetime displayFormat="DD/MM/YYYY" min="2018" max="2100" formControlName="date_of_delivery" placeholder="Select date of delivary"
class="dateBorder"></ion-datetime>
home.ts
ngOnInit() {
this.generalDe
浏览 1提问于2018-10-01得票数 3
回答已采纳
如何将formControlName映射到特定的formArray项？
我无法控制服务器数据并试图创建一个带有电话号码数组的表单。
表单本身在视觉上不会将手机并排布局，我希望能够像我通常使用formGroup那样声明手机的输入控制。
到目前为止，我有以下几点：
主计长：
const exampleData = {
'name': 'John Doe',
'phones': [
{
'typ
浏览 0提问于2019-09-19得票数 2
回答已采纳
Iam使用Angular reactive表单，并在html循环中通过对象数组将动态名称绑定到formcontrolname名称，当我检查输入上的表单控件名称时，它没有显示。
当我通过在frmgrp.value输入字段中输入空值提交表单时，请帮助纠正此问题
<form [formGroup]="frmGroup">
<div *ngFor="let form_elem of formtemplate">
<div [ngSwitchCase]="form_elem.keyType">
<d
浏览 0提问于2021-05-13得票数 0
1回答
我使用了角2反应形式，并为出生日期字段做了一个验证器。验证器正在工作，但事实证明，出生日期字段被划分为三个新字段:年份、月、日。他们都有自己的验证器。我的问题是，如何更改我的代码，使我最初的出生日期验证器在三个字段上工作。
我的原始验证器检查一个字段。输入(2000/12/12)有效
export function dobValidator(control) {
const val = control.value;
const dobPattern = /^\d{4}\/\d{2}\/\d{2}$/ ;
const comp = val.split('/')
浏览 0提问于2016-10-10得票数 0
回答已采纳
1回答
我想用两个主要类型的输入(文本和日期类型)做一个预先筛选器，我创建数组。
arr = [1,2,3]
这是过滤器的行号。但是当I for循环然后将标签更改为dateOfBirth时，所有输入行都发生了更改。
我的模板文件：
<form [formGroup]="searchAdvanceForm">
<div class="filter" *ngFor="let item of filterRow; let i= index;">
<div>{{i + 1
浏览 5提问于2022-08-23得票数 -1
回答已采纳
2回答
我使用角5反应形式和ngx-引导数据报警器作为日期输入.
<div class="col-sm-3 form-group">
<input type="text" class="form-control"
placeholder="End Date"
formControlName="endDate"
[bsConfig]="{ containerClass: 'theme-dar
浏览 2提问于2018-08-13得票数 0
回答已采纳
我在写日历。我希望将最大日期设置为今天，并禁用以后的日期。
HTML
<div [ngClass]="setClassDOB()">
<input type="date" formControlName="dob" name="dob">
</div>
在组件端(TS)我应该做什么？
浏览 0提问于2018-01-25得票数 1
回答已采纳
我有一个stepper表单，在第一步中，用户需要使用Angular Material design Datepicker组件选择日期。
当用户进入下一步时，我希望绑定他们选择的值，并将其再次显示在输入字段的顶部(他们也应该能够在此处更改它)。
我尝试过[(ngModel)]，但不确定我是否正确使用它。
<mat-form-field>
<input [(ngModel)]="date" formControlName="dateFormCtrl" matInput
[matDatepicker]="picker"
浏览 1提问于2018-04-20得票数 2
我有一个名为DateComponent的组件，它包含3个输入(年/月/日)。我还有一个组件，它包含一个formGroup，并且有一个类似于yyyy的formControlname日期。
如果我想通过FormGroup路径，如何像yyyy dd一样很好地从DateComponent获取数据到父组件中的表单？
我尝试使用ControlValueAccessor，但问题是我在DateComponent中有3个ngmodel (日、月、年)，而在父级中有一个是日期。
我真的不喜欢把我的formControl从日期分解到3个字段。任何想法或解决方案。
浏览 10提问于2022-10-20得票数 0
回答已采纳
1回答
我在一个页面上有一个表单，有两个输入框，当我单击提交时，路由器导航到另一个页面，有两个输入框和一个提交按钮。
到目前为止，我已经成功地将查询参数传递给了第二个页面，并预先填充了输入框。
问题是，当我点击第2页上的提交按钮时，输入框中的值没有被提交。如果我“触摸”这些框并输入其他内容，则提交可以正常工作，并且正在提交编辑过的值。
第一页(我省略了代码的其余部分，这部分工作正常)
this._router.navigate(['/dashboard/test/new'],
{ queryParams: {'name': this.name.value , '
浏览 0提问于2016-10-29得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
