Obtaining the attribute value from a custom tag in Angular: A comprehensive guide

Question

Obtaining the attribute value from a custom tag in Angular: A comprehensive guide

I am currently working on creating a customized password component in Angular5. I am having difficulty obtaining the minimum and maximum attribute values required to validate the password.

I attempted to retrieve the values using JavaScript's getAttribute method, but unfortunately, it did not work as expected.

<password
                    [id]="passwordFieldId"
                    title="Password field"
                    placeholder="Enter a password"
                    [isValid]="isPasswordFieldValid"
                    [isDisabled]="isPasswordFieldDisabled"
                    [isRequired]="true"
                    type="password"
                    [minlength]= '5'
                    [maxlength] = '10'
                    [formControlName]="passwordFieldId"
                    [errorText]="errorText">
</password>



 public ngOnInit() {

        this.form = new FormGroup({
            [this.passwordFieldId]: new FormControl('', [Validators.required, Validators.minLength(/** unsure of input here */), Validators.maxLength(/** unsure of input here */)])
        });
    }

   public maxLength = this.form.get(this.passwordFieldId).get('maxlength');

this returns undefined

angular typescript

Answer 1

Answer №1

To access the maximum length allowed for a password input field, you can use the component reference like so:

If you want to access it from the template, here's how:

<password
 #passwordInput
 [id]="passwordFieldId"
...

{{ passwordInput.maxlength | json }}

Alternatively, you can access it from the component class using ViewChild:

@ViewChild('passwordInput', { static: false }) password;
...

logValues() {
    console.log(this.password.maxlength);
}

For a live demonstration, check out this example.

Answer 2

To access the maximum length allowed for a password input field, you can use the component reference like so:

If you want to access it from the template, here's how:

<password
 #passwordInput
 [id]="passwordFieldId"
...

{{ passwordInput.maxlength | json }}

Alternatively, you can access it from the component class using ViewChild:

@ViewChild('passwordInput', { static: false }) password;
...

logValues() {
    console.log(this.password.maxlength);
}

For a live demonstration, check out this example.

Answer 3

Answer №2

Presented here is a demonstration form in Angular. Hopefully, this guide will be useful to you.

Typescript File 1. Imports

import{FormGroup, FormBuilder, Validators} from '@angular/forms';

2. Inside the Class form: FormGroup; 3. Inside Constructor

constructor() {

 this.form = this.formbuilder.group({
      passwordFieldId:['',Validators.compose([Validators.minLength(1), Validators.maxLength(6)])]
});
}

4. In HTML

<form [formGroup]="form">
<input type="password" formControlName="passwordFieldId" >
<button (click)="getPsw()"></button>
</form>

5. In Typescript

getPsw() {
console.log(this.form.passwordFieldId.value)
}

Answer 4

Presented here is a demonstration form in Angular. Hopefully, this guide will be useful to you.

Typescript File 1. Imports

import{FormGroup, FormBuilder, Validators} from '@angular/forms';

2. Inside the Class form: FormGroup; 3. Inside Constructor

constructor() {

 this.form = this.formbuilder.group({
      passwordFieldId:['',Validators.compose([Validators.minLength(1), Validators.maxLength(6)])]
});
}

4. In HTML

<form [formGroup]="form">
<input type="password" formControlName="passwordFieldId" >
<button (click)="getPsw()"></button>
</form>

5. In Typescript

getPsw() {
console.log(this.form.passwordFieldId.value)
}

Answer 5

Answer №3

Why complicate things unnecessarily? Simply define two global variables within the component:

public minChars: number = 7;
public maxChars: number = 12;

Then utilize these variables in your template like so:

<input [minlength]="minChars" [maxlength]="maxChars">

And in the component:

this.formGroup = new FormGroup({
            [this.inputFieldId]: new FormControl('', [Validators.required, Validators.minLength(this.minChars), Validators.maxLength(this.maxChars)])
        });

Answer 6

Why complicate things unnecessarily? Simply define two global variables within the component:

public minChars: number = 7;
public maxChars: number = 12;

Then utilize these variables in your template like so:

<input [minlength]="minChars" [maxlength]="maxChars">

And in the component:

this.formGroup = new FormGroup({
            [this.inputFieldId]: new FormControl('', [Validators.required, Validators.minLength(this.minChars), Validators.maxLength(this.maxChars)])
        });

Obtaining the attribute value from a custom tag in Angular: A comprehensive guide

Answer №1

Answer №2

Answer №3

Similar questions

Error: AppModule requires an array of arguments in order to function properly

How can I customize a Vue component slot in Storybook 8.0.6 using Vue 3.4 and Typescript to display various subcomponents within a story?

Issue arises when attempting to use the useEffect hook in React with Typescript to reset states upon the component unmounting

Upgrade your AngularJS codebase with Angular 2+ services

How do you define prop types when passing them in Nextjs?

Error: Attempting to access the property 'cinemaName' of an undefined object

Typescript implementation for a website featuring a single overarching file alongside separate files for each individual webpage

The directive for angular digits only may still permit certain characters to be entered

Disabling the intellisense feature for locale suggestions in Monaco is recommended

Comparing NativeScript and Flutter

Leveraging Observables in an Angular 2 component to broadcast data to multiple components

Make changes to an array in Javascript without altering the original array

The 'roleName' property is not found within the 'never' data type

Switching from callback to function in TypeScript

leveraging the default browser behavior for the href and target attributes within an <a> element in Angular 2

Struggling with making `http.get` function properly in Angular 2

Encountering an error when using the Vue 3 TypeScript Composition API for style binding with an asynchronous

Guide on sending a message to a specific channel using Discord.js version 13 with TypeScript

`Next.js: Addressing synchronization issues between useMemo and useState`

What is the reason for deprecating the practice of utilizing data and errors in the subscribe/observable method in Angular?