Я новичок в Angular, Firebase и пытаюсь сбросить форму после успешной регистрации.Итак, у меня есть метод с именем registration() в Register.component.ts файле, который будет вызываться, когда пользователь нажимает кнопку отправки.
Проблема: данные сохраняются в Firebase, но форма не сбрасывается. Я имею в виду, что поля формы не очищаются, и если я касаюсь любого поля формы, как только я отправляю, все поля формы сбрасываются.Как я могу сбросить свою форму после успешного сохранения данных в базе данных реального времени Firebase.
, когда я пытаюсь вставить this.buildForm() за пределы .then(), myForm сбрасывается, но когда я использую его внутри .then(), этоне работает, но я могу записать возвращаемое значение.Я также пытался использовать async/await та же проблема, там у меня есть блок try catch внутри блока try, если я запускаю this.buildForm() выше this.auth.register(formData) this.buildForm() работает как положено, но если я запускаю его ниже, он не работает,
Я попытался записать this внутри .then() и снаружи оба значения, кажется, одинаковы.Я прикрепил фрагменты кода component, service, html.
Register.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/services/auth.service';
import { MatchPassword, CustomValidator } from './register.customvalidator';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AngularFireDatabase } from '@angular/fire/database';
import { User } from 'src/app/user/user.model';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
myForm: FormGroup;
constructor(
private router: Router,
private auth: AuthService,
private fb: FormBuilder,
private db: AngularFireDatabase
) {}
ngOnInit() {
this.buildForm();
}
buildForm() {
this.myForm = this.fb.group(
{
firstName: [
'',
[
Validators.required,
Validators.pattern('^[a-zA-Z][a-z A-Z]+$'),
Validators.minLength(3)
]
],
lastName: [
'',
[
Validators.required,
Validators.pattern('^[a-z A-Z]+$'),
Validators.minLength(3)
]
],
email: [
'',
[Validators.required, Validators.email],
CustomValidator.uniqueEmail(this.db)
],
password: [
'',
[
Validators.required,
Validators.pattern(
new RegExp('^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*_])')
),
Validators.minLength(6),
Validators.maxLength(20)
]
],
cpassword: ['', [Validators.required]],
role: ['', [Validators.required]]
},
{ validator: MatchPassword }
);
}
get firstName() {
return this.myForm.get('firstName');
}
get lastName() {
return this.myForm.get('lastName');
}
get email() {
return this.myForm.get('email');
}
get password() {
return this.myForm.get('password');
}
get cpaswword() {
return this.myForm.get('cpaswword');
}
get role() {
return this.myForm.get('role');
}
register(formData: User) {
this.auth
.register(formData)
.then(data => {
if (data) {
console.log(data);
this.buildForm();
}
})
.catch(err => console.error(err.message));
}
cancel() {
this.router.navigate(['/login']);
}
}
Register.component.html
<div class="xs container mt-2">
<div class="card">
<h1 class="display-4 text-center">Registration</h1>
<form [formGroup]="myForm" class="p-5" (ngSubmit)="register(myForm.value)">
<div class="row">
<div class="form-group col-6">
<input
type="text"
formControlName="firstName"
class="form-control"
placeholder="First Name"
/>
<div *ngIf="firstName.touched" class="pl-2 validation-error">
<div *ngIf="firstName.errors && (firstName?.errors)['required']">
Required*
</div>
<div *ngIf="firstName.errors && (firstName?.errors)['pattern']">
contains invalid Characters
</div>
<div *ngIf="firstName.errors && (firstName?.errors)['minlength']">
min length 3
</div>
</div>
</div>
<div class="form-group col-6">
<input
type="text"
formControlName="lastName"
class="form-control"
placeholder="Last Name"
/>
<div *ngIf="lastName.touched" class="pl-2 validation-error">
<div *ngIf="lastName.errors && (lastName?.errors)['required']">
Required*
</div>
<div *ngIf="lastName.errors && (lastName?.errors)['pattern']">
contains invalid Characters
</div>
<div *ngIf="lastName.errors && (lastName?.errors)['minlength']">
min length 3
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-12">
<input
type="email"
formControlName="email"
placeholder="Email"
class="form-control"
/>
<div *ngIf="email.touched" class="pl-2 validation-error">
<div *ngIf="email.errors && (email?.errors)['required']">
Required*
</div>
<div *ngIf="email?.errors && (email?.errors)['email']">
contains invalid Characters
</div>
<div *ngIf="email.valid" class="text-success">
{{ email.value }} is available
</div>
<div *ngIf="email.pending" class="text-secondary">
{{ email.value }} checking availability ......
</div>
<div
*ngIf="
email?.errors &&
email.dirty &&
!(email?.errors)['emailAvailable'] &&
!(email?.errors)['email']
"
>
{{ email.value }} is already registered
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-6">
<input
type="password"
formControlName="password"
placeholder="Password"
class="form-control"
/>
<div *ngIf="password.touched" class="pl-2 validation-error">
<div *ngIf="password?.errors && (password?.errors)['required']">
Required*
</div>
<div *ngIf="password?.errors && (password?.errors)['pattern']">
password invalid please choose other
</div>
<div *ngIf="password?.errors && (password?.errors)['minlength']">
should contain atleast 6 characters
</div>
<div *ngIf="password?.errors && (password?.errors)['maxlength']">
should contain atmost 20 characters
</div>
</div>
</div>
<div class="form-group col-6">
<input
type="password"
formControlName="cpassword"
placeholder="Confirm Password"
class="form-control"
/>
<div
*ngIf="myForm?.errors && (myForm?.errors)['passwordMismatch']"
class="validation-error text-center"
>
password mismatch
</div>
</div>
<small id="passwordHelp" class="text-center p-2 form-text text-muted"
>password requirements: 1 letter,1 numeric, 1 special character and
min length 6</small
>
</div>
<br />
<div class="row">
<div class="form-group col-12">
<select class="form-control" formControlName="role" required>
<option value="">Select Role</option>
<option value="employee">Employee</option>
<option value="admin">Admin</option>
</select>
<div *ngIf="role.touched" class="pl-2 validation-error">
<div *ngIf="role.errors && (role?.errors)['required']">
please select one
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-6">
<button
type="submit"
class="btn btn-md btn-block btn-info"
[disabled]="myForm.invalid || myForm.untouched"
>
Submit
</button>
</div>
<div class="form-group col-6">
<button
type="button"
class="btn btn-md btn-block btn-secondary"
(click)="cancel()"
>
cancel
</button>
</div>
</div>
</form>
</div>
</div>
auth.service.ts
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { User } from 'firebase';
import { LoaderService } from './loader.service';
import { AngularFireDatabase } from '@angular/fire/database';
import { take, map } from 'rxjs/operators';
import { User as NewUser } from '../user/user.model';
@Injectable({
providedIn: 'root'
})
export class AuthService {
constructor(
private authDb: AngularFireAuth,
private loader: LoaderService,
private db: AngularFireDatabase
) {}
register(user) {
return new Promise<any>((resolve, reject) => {
this.authDb.auth
.createUserWithEmailAndPassword(user.email, user.password)
.then(async res => {
const { uid } = res.user;
const response = this.addUserToDb(user, uid);
resolve(response);
})
.catch(err => reject(err));
});
}
async addUserToDb({ email, firstName, lastName, role }: NewUser, uid) {
try {
await this.db
.object(`users/${uid}`)
.set({ uid, email, firstName, lastName, role });
return 'user Added succesfully';
} catch (error) {
console.log(error.message);
return error;
}
}
}