I'm currently working on a form that includes fields for usernames and email addresses. Alongside these, I have a separate field where I want the text input by the user to be displayed. I'm facing an issue with event binding within the form – it doesn't seem to be working as expected. However, when I move the event binding outside of the form, it works fine. I'm looking for a solution to make it work within the form itself. Any assistance would be greatly appreciated.
Below is the code snippet I'm trying to implement:
<label for="typeahead-basic">Enter text</label>
<input id="typeahead-basic" type="text" class="form-control" [(ngModel)]="myModel"/>
<pre>Model: {{ myModel }}</pre><br/>
**TS**
public myModel: any;
Below is my code
**HTML**
<div class="row" style="width: 100%;">
<div class="col-md-4 col-lg-4 col-sm-12">
<!-- left-side -->
<form class="shadow-lg p-3" [formGroup]="registrationForm" style="min-height: calc(100vh - 100px);position:relative">
<nav class="navbar navbar-light bg-light mb-2 ">
<a class="navbar-brand" href="#">
<h5 class="text-dark text-center font-weight-bold">
Create New User
</h5>
</a>
<h6>Enter the name of the user you want to create here and click the "create user once complete."</h6>
</nav>
<div class="mb-3">
<label for="exampleInputName" class="form-label">Name</label>
<input type="text" class="form-control" id="exampleInputName" aria-describedby="nameHelp"
placeholder="Enter name of user here" [(ngModel)]="myModel"> **OVER HERE**
</div>
...
<button class="btn-primary align-middle btn" style="float:none;margin:auto;display:block;border-radius:8px;">
<i class="fa fa-plus" aria-hidden="true"></i>
Create User
</button>
</div>
...
<div style="width: 24rem; float: none; margin: auto; display: block;">
<div class="row card mt-4">
<img src="assets/images/avatar.png" class="card-img-top" alt="avatar" height="150px" width="150px">
<div class="card-body">
<p class="card-text">Model: {{ myModel }}</p> **OVER HERE**
<p class="card-text">Email: </p>
</div>
</div>
</div>
</div>