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>
