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

Angular 13/14 – 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/14 apps.

Let, you have a form and your angular 13/14 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>