Angular 13 – property ‘name’ comes from an index signature, so it must be accessed with [‘required’]; In this tutorial, we will learn how to remove property ‘name’ comes from an index signature, so it must be accessed with [‘required’] error in angular 13 apps.

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’]:

We 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>