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

Using an alias to call a function defined in a separate module in TypeScript

Exploring Angular2: Incorporating External Plugins with AngularCLI (webpack)

Having difficulty implementing canDeactivate or canActivate in Angular

Unable to correlate the response with the designated object

Loading CSS files conditionally in Angular2's index.html

Is it possible in RxJS to configure a ReplaySubject (or equivalent) that replays the latest messages with a distinctive identifier?

The 'ngModel' property cannot be bound to the 'input' element as it is not recognized. Error code: ngtsc(-998002)

Understanding DefinitelyTyped: Deciphering the explanation behind 'export = _;'

Steps to adding an item to a TypeScript array

Guide to setting up Cosmos DB database connection using NestJS version 9.0.0

Evolution of ReactJS state over time

Angular will continue to stay on the current page unless the form is completed

typescript Parameter type dependency based on value is not functioning

Choosing specific values from a dropdown menu in Angular to pass as parameters for an API call

How can you verify the value of a disabled HTML input element in TestCafe using Typescript?

The module 'AppModule' has unexpectedly declared a value of 'Component' that was not anticipated

After updating to Angular 15, the web component fails to function properly on outdated versions of Chrome

Oops! The program encountered an issue: Unable to retrieve information from an undefined property

Encountering a CORS problem when an Angular application communicates with a .NET Core API integrated with the Sustainsys.Saml2 library and Azure Active Directory serving as the Identity

Angular and ag-Grid enable the addition of a convenient date picker to a date cell, simplifying the