I'm attempting to transfer data from an HTML form to the variables (email and password) in the function doRegister() when the form is submitted. However, I am encountering errors related to two-way data binding.
Errors:
In HTML: Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{email}}=$event] in "path to the HTML document"
In TS file: Can't resolve all parameters for RegisterComponent in "path to the .ts file"
1. HTML FILE
<p class="lead">Already a member? Please <a routerLink="/login">log in</a> instead</p>
<form (submit)="onRegisterSubmit()">
<div role="alert" *ngIf="formError" class="alert">{{ formError }}</div>
<p>
<label>Email</label>
<input type="text" [(ngModel)]="email" required>
</p>
<p>
<label>Password:</label>
<input type="password" [(ngModel)]="password" required>
</p>
<p>
<button type="submit" >Submit</button>
</p>
</form>
2 .TS file
import { User, UserRegister } from './../user';
import { Component, OnInit } from '@angular/core';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Loc8rDataService } from '../loc8r-data.service';
import { Router } from '@angular/router';
import { AuthenticationService } from '../authentication.service';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
constructor(private Authentication: AuthenticationService) { }
ngOnInit() {
}
formError: string ='';
public onRegisterSubmit(): void {
this.doRegister();
}
private doRegister(): void {
let uEmail = '';
let uPassword = '';
const userreg: UserRegister = {email: uEmail, password: uPassword };
this.Authentication.register(userreg)
.catch((message: string) => this.formError = message);
}
}