I am just beginning to explore Angular.
This is the template for my custom component:
<div class="row">
<div class="col-xs-12">
<form action="">
<div class="ro">
<div class="col sm-5 form-group">
<label for="name">Name</label>
<input type="text" id="name" class="form-control" #nameInput />
</div>
<div class="col-sm-2 form-group">
<label for="amount">Amount</label>
<input type="number" id="amount" class="form-control" #amountInput />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success" type="submit" (click)="onAddItem()">
Add
</button>
<button class="btn btn-danger" type="button">Delete</button>
<button class="btn btn-primary" type="button">Clear</button>
</div>
</div>
</form>
</div>
</div>
This is the corresponding TypeScript file:
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
@Component({
selector: 'app-shopping-edit',
templateUrl: './shopping-edit.component.html',
styleUrls: ['./shopping-edit.component.css'],
})
export class ShoppingEditComponent implements OnInit {
@ViewChild('nameInput') nameInputRef: ElementRef;
@ViewChild('amountInput') amountInputRef: ElementRef;
constructor() {}
ngOnInit(): void {}
onAddItem() {}
}
I am encountering an error when attempting to initialize the variables nameInputRef and amountInputRef. However, these values are being received from the form. How can I resolve this issue?