Angular 16 property ‘name’ comes from an index signature, so it must be accessed with [‘required’]

Angular 16 – property ‘name’ comes from an index signature, so it must be accessed with [‘required’]; In this tutorial, i am going to show you how to remove property ‘name’ comes from an index signature, so it must be accessed with [‘required’] error in angular 13 apps.

Sometime, you found some errors like angular property ‘required’ comes from an index signature, so it must be accessed with [‘required’]. angular, property listid comes from an index signature so it must be accessed with listid and the type has a string index signature but it is being accessed using a dotted property access.

Let, you have a form and your angular 13 apps and you validate your form data like following:

<div class="form-group">
    <label for="name">Name</label>
    <input 
        formControlName="name"
        id="name" 
        type="text" 
        class="form-control">
    <div *ngIf="f.name.touched && f.name.invalid" class="alert alert-danger">
        <div *ngIf="f.name.errors && f.name.errors.required">Name is required.</div>
        <div *ngIf="f.name.errors && f.name.errors.minlength">Name should be 3 character.</div>
    </div>
</div>

At that time, this error will occur property ‘name’ comes from an index signature, so it must be accessed with [‘required’]:

You can use the following code to remove or solve this error:

<div class="form-group">
    <label for="name">Name</label>
    <input 
        formControlName="name"
        id="name" 
        type="text" 
        class="form-control">
    <div *ngIf="f['name'].touched && f['name'].invalid" class="alert alert-danger">
        <div *ngIf="f['name'].errors && f['name'].errors['required']">Name is required.</div>
        <div *ngIf="f['name'].errors && f['name'].errors['minlength']">Name should be 3 character.</div>
    </div>
</div>

Recommended Angular Tutorials

Leave a Comment