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

Getting error “property ‘required’ comes from an index signature, so it must be accessed with [‘required’]”; The property ‘name’ is not explicitly defined in the component’s class, rather it is being accessed through the index signature. To fix this error, you can either explicitly define the property ‘name’ in the component’s class, or you can use the [‘name’] syntax to access the property.

Let, you have a form in your angular apps, and validate your form data; like the 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>

And you occur error property ‘name’ comes from an index signature, so it must be accessed with [‘required’], you can either explicitly define the property ‘name’ in the component’s class, or you can use the [‘name’] syntax to access the property, 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>

That’s it; you have learned how to fix the error property ‘required’ comes from an index signature, so it must be accessed with [‘required’].

Recommended Tutorials