I recently made changes to the form implementation on my login screen. Instead of binding to the inputs [(ngModel)] in the backend, I now pass the form itself.
Although this change allowed the original tests to pass, it caused issues with the actual app functionality. Can anyone help me understand what went wrong here? Please note that the code provided is just a simplified example.
BEFORE
app.ts
username: string;
onSubmit(form: NgForm) {
if (form.valid) {
// do something with this.username...
// this.username will reflect whatever is entered in the input box since it is bound with [(ngModel)]
}
}
app.html
<input class="form-control" id="username" name="username" type="text" autofocus required
placeholder="username" [(ngModel)]="username"/>
After
app.ts
username: string;
onSubmit(form: NgForm) {
this.username = form.value.username
if (form.valid) {
// do something with this.username...
// this.username should now hold the value passed via the form
}
}
app.html no longer includes [(ngModel)]="username"
<input class="form-control" id="username" name="username" type="text" autofocus required
placeholder="username"/>