Accessing the placeholder attribute value of an ngcontrol in a TypeScript .ts file


I have encountered an issue where the placeholder attribute is showing as undefined in a TypeScript .ts file. Here is the code snippet I wrote:

HTML Code-

<label class="lab1">Closing date</label>
<input placeholder="M/d/yyyy" type="text" [(ngModel)]="_module.ClosingDate" ngControl="ClosingDate" #ClosingDate="ngForm">
<button type="submit" class="custombutton" (click)="Test1(ClosingDate)">Get Placeholder value</button>

TypeScript file code-

function Test1() {
    var i;
    for (i = 0; i < arguments.length; i++) {
        alert(arguments[i].name); // Here I receive the correct ngcontrol name - "ClosingDate"
        alert(arguments[i].placeholder); // I expect to get "M/d/yyyy" but instead receiving "undefined"
    }
}

When I click the button, it calls the Test1() method with the argument "ClosingDate", which corresponds to my ngcontrol name. While I can correctly retrieve the ngcontrol name in the Test1(), I am unable to access the placeholder value and it returns "undefined".

The code works fine with HTML input control, but when using ngcontrol, it poses an issue. Any suggestions on how I can obtain the placeholder value would be appreciated.

Thank you,
Kapil Bhagwat

Answer №1

<label class="lab1">End date</label>
<input #myInput placeholder="M/d/yyyy" type="text" [(ngModel)]="_module.EndDate" ngControl="EndDate" #EndDate="ngForm">
<button type="submit" class="custombutton" (click)="GetEndDateValue(EndDate, myInput.getAttribute('placeholder'))">Retrieve Placeholder content</button>
GetEndDateValue(endDate, placeholder) {
  console.log(endDate, placeholder);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A class in Typescript containing static methods that adhere to an interface with a string index

Take a look at this code snippet: interface StringDoers { [key: string]: (s: string) => void; } class MyStringDoers implements StringDoers { public static print(s: string) { console.log(s); } public static printTwice(s: string) { conso ...

Error in Typescript: A computed property name must be one of the types 'string', 'number', 'symbol', or 'any'

Here is the current code I am working with: interface sizes { [key: string]: Partial<CSSStyleDeclaration>[]; } export const useStyleBlocks = ( resolution = 'large', blocks = [{}] ): Partial<CSSStyleDeclaration>[] => { cons ...

At what point should you unsubscribe from an observable within an Angular component?

As I integrate ngrx with Angular, suppose I retrieve data from a selector in a component and store it in a variable. In the ngOnDestroy lifecycle hook, should I manually unsubscribe using the unsubscribe method, or does the ngrx select method handle it a ...

Retrieve information from a separate controller in Angular

Working within Angular 4, I've set up a navbar and menu component that lists various tasks pulled from a web service. Clicking on a task in the menu component opens up the edit task component, which displays a form for editing the task. The form fiel ...

Disabling ngIf but still utilizing ngContent will render the template bindings

Creating a basic component in the following way: @Component({ selector: 'loader', template: `<div *ngIf='false'> <ng-content></ng-content> </div>`, }) export class Loader {} When it is imple ...

Is your Angular app missing i18next translations?

Can Angular's i18next provider be configured to hide any value when the key is not defined? The issue arises when there is no translation defined for a specific key like my:key. I want to display an empty string in the template instead of showing the ...

Modifying the default FilterSettings in ejs-grid: A step-by-step guide

Brand new to Angular and Material technologies, I recently created a grid following the instructions provided here. Below is the html template for the table: <ejs-grid #grid [dataSource]='data' allowFiltering='true' allowPaging=& ...

Sort attributes by the type of property

Is there a way to create a customized type by extracting specific properties from a generic type? class Test { value1!: Date value2!: number value3!: Date value4!: string } type FilterProperties<T, TFieldType> = //looking for a solution to se ...

Having difficulty with installing the ttf-loader for React with Typescript

Currently, I am working on a project using React with TypeScript and trying to incorporate the font feature in react-pdf/renderer. The font has been successfully imported and registered as shown below: import { Text, View, StyleSheet, Font } from "@re ...

How to toggle tooltip visibility dynamically using Angular 2

I am working with elements within an ngFor loop. Some of these elements have tooltips, while others do not. I am experiencing an issue where when using the code snippet below: <div ngFor="let item of items"> <div [title]="item.title"> Ele ...

Displaying data from Java backend to Angular front-end using HTTP

I'm in the process of developing an application that utilizes an Angular frontend and Java backend. I am looking to showcase data from the backend, which is stored in JSON format. How can I achieve this? Initially, I created a JSON array in my Java c ...

What is the best way to set up TSLint to apply specific rules with one line and different rules with another line

There is a unique method in which I can specify the code to format, such as forcing the else statement to be on the same line as the ending brace of an if statement. "one-line": [ true, "check-open-brace", "check-catch", "check-else", "check-fin ...

Exploring Angular - Is it possible to automate testing for a disabled field using Selenium Protractor?

For my MEAN stack project, I am implementing Selenium webdriver to conduct frontend UI testing. There is a field that is non-editable. Please refer to the attached image: Image How can I verify that this field cannot be edited? it('not edit th ...

The function is failing to return the expected value received from the observable subscription

I am attempting to verify the existence of a user in an Angular's in-memory API by validating their username. The function checkUsernameExists(username) is supposed to return an Observable<boolean> based on whether the API responds with undefine ...

When the boolean is initially set to false, it will return true in an if statement without using

My Angular component contains a component-level boolean variable and an onClick event. Here's what the HTML file looks like: <div class="divClass" (click)="onClick($event)"></div> The relevant code from the TypeScript file is as follows: ...

"Discover the versatility of implementing a single ag grid across various components, all while dynamically adjusting its style

I am facing an issue where I have an angular grid ag-grid in component1, which is being used in some other component2. Now, I need to use the same component1 in component3 but with a different class for ag-grid, specifically 'ag-grid-theme-dark'. ...

Internal variable via router

The Back button on my main component is not always visible, depending on the child component. I have attempted to use a local variable with no success. In my parent app.component.html file, I have included the following: <button *ngIf="child.goBackUrl ...

Encountered an issue when attempting to include a model in sequelize-typescript

I've been attempting to incorporate a model using sequelize-typescript: type AppMetaDataAttributes = { id: string; name: string; version: string; createdAt: string; updatedAt: string; }; type AppMetaDataCreationAttributes = Optional<App ...

Eliminating the nested API call within a loop

After making an API call to retrieve a set of data such as a list of users, I noticed that I am implementing a for loop and within it, I am making another API call to obtain each user's profile details based on their ID. I understand that this approac ...

The functionality of the Javascript window.print() method is limited to a single use

I've been working on an Angular project and I have the following code snippet implemented in one of the components. Everything works fine when I try to print for the first time using the onClickPrint() method, but it doesn't seem to trigger when ...