Error occurs in the template of component RegisterComponent in Angular

Issue

Angualar Register Component Error

using following Angular Register component in user registration register.component.html

<div class="form-group">
            <label for="name">Name</label>
            <input type="text" formControlName="name" name="name" class="form-control" placeholder="Enter Name" [ngClass]="{'is-invalid' : submitted && f.name.errors}">

            <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
                <div *ngIf="f.name.errors.required">
                    Name is Required
                </div>
            </div>
        </div>

then when I ring Angular ng serve run command it is occuring following error messages as well

Error: src/app/register/register.component.html:9:155 - error TS4111: Property 'name' comes from an index signature, so it must be accessed with ['name'].

9             <input type="text" formControlName="name" name="name" class="form-control" placeholder="Enter Name" [ngClass]="{'is-invalid' :
submitted && f.name.errors}">
  
               ~~~~

  src/app/register/register.component.ts:9:16
    9   templateUrl: './register.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component RegisterComponent.


Error: src/app/register/register.component.html:11:40 - error TS4111: Property 'name' comes from an index signature, so it must be accessed with ['name'].

11             <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
                                          ~~~~

  src/app/register/register.component.ts:9:16
    9   templateUrl: './register.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component RegisterComponent.


Error: src/app/register/register.component.html:12:31 - error TS4111: Property 'name' comes from an index signature, so it must be accessed with ['name'].

12                 <div *ngIf="f.name.errors.required">
                                 ~~~~

  src/app/register/register.component.ts:9:16
    9   templateUrl: './register.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component RegisterComponent.


Error: src/app/register/register.component.html:12:43 - error TS4111: Property 'required' comes from an index signature, so it must be accessed with ['required'].

12                 <div *ngIf="f.name.errors.required">
                                             ~~~~~~~~

  src/app/register/register.component.ts:9:16
    9   templateUrl: './register.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component RegisterComponent.

how to fix this problem?

Solution

Could you try changing from direct property access to accessing it via quotes, that is what the error is saying to correct!

<div class="form-group">
        <label for="name">Name</label>
        <input type="text" formControlName="name" name="name" class="form-control" placeholder="Enter Name" [ngClass]="{'is-invalid' : submitted && f?.['name']?.['errors']}">

        <div *ngIf="submitted && f?.['name']?.['errors']" class="invalid-feedback">
            <div *ngIf="f?.['name']?.['errors']?.['required']">
                Name is Required
            </div>
        </div>
    </div>

---

References

1. Property 'fName' comes from an index signature

Answered By - Naren Murali