Having trouble sending data to a firebase project from an angular form and encountering a specific error.
This snippet shows the HTML part of the component containing the form:
<form #form="ngForm" autocomplete="off">
<div class="form-row">
<div class="input-group form-group-no-border col-lg-6">
<input type="text" name=FirstName #FirstName="ngModel" [(ngModel)]="sevice.formData.FirstName" class="form-control" placeholder="First Name..." required />
</div>
<div class="input-group form-group-no-border input-lg col-lg-6">
<input type="text" name=LastName #LastName="ngModel" [(ngModel)]="sevice.formData.LastName" class="form-control" placeholder="Last Name..." required />
</div>
</div>
<div class="input-group form-group-no-border input-lg">
<input type="text" name=Email #Email="ngModel" [(ngModel)]="sevice.formData.Email" class="form-control" placeholder="Email Address..." required />
</div>
<div class="input-group form-group-no-border input-lg">
<input type="password" name=Password #Password="ngModel" [(ngModel)]="sevice.formData.Password" placeholder="Password..." class="form-control" required />
</div>
<div class="input-group form-group-no-border input-lg">
<input type="password" placeholder="Re-Enter Password..." class="form-control" required />
</div>
<div class="footer text-center">
<button type="submit" class="btn btn-block btn-round btn-lg btn-info"> Get Started</button>
</div>
</form>
This is the TypeScript file for that component:
import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from '../Shared/authentication.service';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {
constructor(private service : AuthenticationService) { }
ngOnInit() {
this.resetForm();
}
resetForm(form? : NgForm){
if(form!=null){
form.resetForm();
this.service.formData={
FirstName : '',
LastName : '',
Email : '',
Password : '',
}
}
}
}
Below is the code for the service:
import { Injectable } from '@angular/core';
import { Authentication } from './authentication.model';
@Injectable({
providedIn: 'root'
})
export class AuthenticationService {
formData : Authentication;
constructor() { }
}
Finally, here is the model class for the service:
export class Authentication {
FirstName : string ;
LastName : String ;
Email : string ;
Password : string ;
}
If there's any confusion, I would appreciate it if someone could assist in resolving this issue.