[英]How to get <input type=date> value in TypeScript
I'm making a survey website and what I'm trying to do is get two dates from the user: start date and end date, and make the survey available between these days (I'll disable the take survey button after the end date).我正在制作一个调查网站,我想做的是从用户那里获取两个日期:开始日期和结束日期,并在这几天之间提供调查(我将在结束日期后禁用接受调查按钮). Before even getting to coding this logic, I can't take the user's input and display it in the console log.
在开始编写此逻辑之前,我无法接受用户的输入并将其显示在控制台日志中。 Here is what I have so far:
这是我到目前为止所拥有的:
HTML: HTML:
<input formControlName="startDate" id="startDate" type="date"/>
TypeScript: TypeScript:
const startDate = document.getElementById('startDate') as HTMLInputElement | null;
console.log(startDate?.value);
And the console.log tells me it's undefined. console.log 告诉我它是未定义的。 Any ideas on how to fix this?
有想法该怎么解决这个吗?
document.querySelector('input').addEventListener('change', () => { const startDate = document.getElementById('startDate') console.log(startDate.value); })
<input formControlName="startDate" id="startDate" type="date" />
You can use a type guard function to check whether the selected element is actually an input element before binding the callback function to its change
event:在将回调 function 绑定到其
change
事件之前,您可以使用类型保护 function检查所选元素是否实际上是输入元素:
function isInputElement (
value: Element | null | undefined,
): value is HTMLInputElement {
return value?.tagName === 'INPUT';
}
const startDateInput = document.getElementById('startDate');
if (isInputElement(startDateInput)) {
// If the condition evaluates to true,
// then the compiler is certain that it's an <input>:
startDateInput.addEventListener('change', () => {
console.log(startDateInput.value);
//^? (property) HTMLInputElement.value: string
});
}
else {
// The element either didn't exist
// or it wasn't an <input>
}
Compiled JS from the TS playground:从 TS 游乐场编译的 JS:
"use strict"; function isInputElement(value) { return value?.tagName === 'INPUT'; } const startDateInput = document.getElementById('startDate'); if (isInputElement(startDateInput)) { startDateInput.addEventListener('change', () => { console.log(startDateInput.value); }); } else { }
<input formControlName="startDate" id="startDate" type="date" />
I don't really know why you are trying to use vanilla Javascript in an Angular project which uses Typescript , is not ideal, is not the Angular
way.我真的不知道你为什么要在使用 Typescript 的Angular项目中尝试使用香草Javascript ,这并不理想,不是
Angular
方式。
Given your code example, you are using ReactiveForms
, your input element has a formControlName
which means, somewhere in the component's logic, you have the whole form created as a Javascript object, something like the following:鉴于您的代码示例,您正在使用
ReactiveForms
,您的输入元素有一个formControlName
这意味着,在组件逻辑的某处,您将整个表单创建为 Javascript object,如下所示:
...
myForm!: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.myForm = this.fb.group({
startDate: ['', Validators.required]
});
}
If you simply want the value of the startDate
control, then use the form object accessing the specific control, like this:如果您只是想要
startDate
控件的值,则使用表单 object 访问特定控件,如下所示:
getDate(): Date | undefined {
return this.myForm.get('startDate')?.value; // it can be undefined
}
If you want to listen the input change everytime the user changes the value, then use valueChanges
like the following:如果您想在每次用户更改值时监听输入更改,请使用如下所示的
valueChanges
:
ngOnInit(): void {
this.myForm.get('startDate').valueChanges.subscribe((theDate) => console.log(theDate));
}
Let's say you are not using ReactiveForms
, and you want to select this input element, you could do it using a local reference onto the input element, and then access it in your code using ViewChild
, like the following:假设您没有使用
ReactiveForms
,并且您想要 select 这个输入元素,您可以使用对输入元素的本地引用来实现它,然后使用ViewChild
在您的代码中访问它,如下所示:
<input type="text" #myName/>
...
@ViewChild('myName') myName!: ElementRef;
getName(): string {
return this.myName.nativeElement.value;
}
I highly suggest you to read the official docs , if you don't know how to solve an specific scenario in an Angular project.如果您不知道如何解决 Angular 项目中的特定场景,我强烈建议您阅读官方文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.