Property 'myForm' does not exist on type 'ShoppingCartComponent'

1,007 views
Skip to first unread message

Maureen Moore

unread,
Jul 5, 2020, 7:49:23 PM7/5/20
to Angular and AngularJS discussion
I have the following component html:

<form *ngFor="let product of products" [formGroup]="myForm" name="myForm" (ngSubmit)="onSubmit([product.name], [product.price], int)">
<div id="cartItemsList">
<ul>
 
<li>
 
<div name="product_name">{{product.name }}</div>
 
<div><img src="../assets/images/gallery/{{product.thumbnail}}" /></div>
 
<div>{{product.price }}</div>
 
<button class="minus-btn" (click)="minus()" type="button" name="minus_btn">
<img src="../assets/images/minus.svg" alt="minus" /></button>
<input pattern="^(0|\+?[1-9]\d*)$" class="num" name="int" [value]="int" formControlName="int" ng-minlength="0" type="number">
<button class="plus-btn" (click)="plus()" type="button" name="plus_btn">
<img src="../assets/images/plus.svg" alt="plus" /></button>
 
<button type="submit" class="btnAddAction">Add to Cart</button>
</li>
</ul>
</div>
</form>



And in the controller ts file, I have:

ngOnInit(): void {
   
this.myForm = new FormGroup({
       
int: new FormControl()
});
}



I get the following error:

   ERROR in src/app/shopping-cart/shopping-cart.component.ts:80:9 - error TS2339: Property 'myForm' does not exist on type 'ShoppingCartComponent'.

    80    this.myForm = new FormGroup({
but as you can see, myForm does exist in the component. How can I fix this error?

tha...@rikkeisoft.com

unread,
Jul 5, 2020, 9:23:31 PM7/5/20
to Angular and AngularJS discussion
Make sure the "myForm" property is already declared:
export class ShoppingCartComponent implements OnInit {
...
myForm: FormGroup;
...


Maureen Moore

unread,
Jul 6, 2020, 7:37:10 AM7/6/20
to Angular and AngularJS discussion
Thanks, tha...@rikkelsoft.com. That worked!
Reply all
Reply to author
Forward
0 new messages