我是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;
}
}
}
答案 0 :(得分：0)
在您的ts代码中尝试类似的操作：
@ViewChild(FormGroupDirective) _formGroupDirective: FormGroupDirective;
// If you're using @angular 8, use:
// @ViewChild(FormGroupDirective, {static: false}) _formGroupDirective: FormGroupDirective;
...
register(formData: User) {
this.auth
.register(formData)
.then(data => {
if (data) {
// If you use this.myForm.reset(), the validators will be
// fired after the reset and you'll get some validation messages
// for the fields with Validators.required, so use:
this._formGroupDirective.resetForm();
// Mark the email as untouche or the e-mail valid message will be shown
this.myForm.get('email').markAsUntouched();
}
})
.catch(err => console.error(err.message));
}
在提交新值并清除表单后，为了避免在电子邮件有效时显示验证消息（可用电子邮件），您需要更改模板代码：
<div *ngIf="myForm?.get('email')?.valid && !myForm.get('email')?.untouched" class="text-success">
{{ myForm?.get('email')?.value }} is available
</div>