signup.html：
<form [formGroup]="signupForm" (submit)="onSubmit()" class="form-detail" >
<h2>Registration Form</h2>
<div class="form-row-total">
<div class="form-row">
<input type="text" name="full-name" id="full-name" class="input-text" placeholder="Your Name" required>
</div>
<div class="row" >
<div *ngIf="signupForm.controls.name.errors?.['required']" class="alert alert-danger" role="alert">
Enter a name
</div>
<div *ngIf="signupForm.controls.name.errors?.['nom'] " class="alert alert-danger" role="alert">
Invalid name form
</div>
</div>
<div class="form-row">
<input type="text" name="your-email" id="your-email" class="input-text" placeholder="Your Email" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}">
</div>
<div class="row" >
<div *ngIf="signupForm.controls.email.errors?.['required'] " class="alert alert-danger" role="alert">
Enter an email
</div>
<div *ngIf="signupForm.controls.email.errors?.['email'] " class="alert alert-danger" role="alert">
Invalid email form
</div>
<div *ngIf="userexist" class="alert alert-danger" role="alert">
User already exists
</div>
</div>
</div>
<div class="form-row-total">
<div class="form-row">
<input type="password" name="password" id="password" class="input-text" placeholder="Your Password" required>
</div>
<div class="row" >
<div *ngIf="signupForm.controls.password.errors?.['required'] " class="alert alert-danger" role="alert">
Enter a password
</div>
<div *ngIf="signupForm.controls.password.errors?.['matchPassword'] " class="alert alert-danger" role="alert">
Passwords does not match
</div>
</div>
<div class="form-row">
<input type="password" name="comfirm-password" id="comfirm-password" class="input-text" placeholder="Confirm Password" required>
</div>
<div class="row" >
<div *ngIf="signupForm.controls.password.errors?.['matchPassword'] " class="alert alert-danger" role="alert">
Passwords does not match
</div>
</div>
</div>
<div class="form-row-last">
<input type="submit" name="register" class="register" value="Sign Up">
</div>
</form>
注册.ts：
async onSubmit(): Promise<void> {
if (this.signupForm.valid) {
const name = this.signupForm.get('name')!.value;
const email = this.signupForm.get('email')!.value;
const password = this.signupForm.get('password')!.value;
const confirmpassword = this.signupForm.get('confirmpassword')!.value;
const userExists = await this.checkIfUserExists(email);
if (userExists) {
this.errorMessage = 'User already exists. Please use a different email.';
this.userexist=true;
} else {
this.errorMessage = null;
this.signupForm.reset();
await this.addNewUser(name, email, password);
await this.registeruser(name, email, password);
this.router.navigate(['/dashboard']);
}
} else {
console.log('Form is invalid');
}
}
因此，填写输入字段后，每当我按下按钮时，即使格式正确，消息“表单无效”总是出现在开发工具中 如果你可以改进我的html代码（我希望警报在按下按钮后立即出现，然后在再次填写字段后消失，或者如果你有更好的主意，你可以做任何你想做的事情）
在您的signup-component.html中，将控件
nameemailpasswordconfirmPasswordsignupFormsign-component.html：
<form [formGroup]="signupForm" (ngSubmit)="onSubmit()" class="form-detail">
<h2>Registration Form</h2>
<div class="form-row-total">
<div class="form-row">
<input type="text" formControlName="name" class="input-text" placeholder="Your Name" required>
<div *ngIf="signupForm.controls.name.touched && signupForm.controls.name.errors?.required" class="alert alert-danger" role="alert">
Enter a name
</div>
</div>
<div class="form-row">
<input type="text" formControlName="email" class="input-text" placeholder="Your Email" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}">
<div *ngIf="signupForm.controls.email.touched && signupForm.controls.email.errors?.required" class="alert alert-danger" role="alert">
Enter an email
</div>
<div *ngIf="signupForm.controls.email.touched && signupForm.controls.email.errors?.pattern" class="alert alert-danger" role="alert">
Invalid email format
</div>
<div *ngIf="userExists" class="alert alert-danger" role="alert">
User already exists
</div>
</div>
</div>
<div class="form-row-total">
<div class="form-row">
<input type="password" formControlName="password" class="input-text" placeholder="Your Password" required>
<div *ngIf="signupForm.controls.password.touched && signupForm.controls.password.errors?.required" class="alert alert-danger" role="alert">
Enter a password
</div>
</div>
<div class="form-row">
<input type="password" formControlName="confirmPassword" class="input-text" placeholder="Confirm Password" required>
<div *ngIf="signupForm.controls.confirmPassword.touched && signupForm.hasError('passwordMismatch')" class="alert alert-danger" role="alert">
Passwords do not match
</div>
</div>
</div>
<div class="form-row-last">
<input type="submit" class="register" value="Sign Up">
</div>
</form>
sign-up.component.ts：
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
signupForm: FormGroup;
userExists = false;
constructor(private formBuilder: FormBuilder) {}
ngOnInit(): void {
this.signupForm = this.formBuilder.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.pattern('[^@]+@[^@]+\\.[a-zA-Z]{2,6}')]],
password: ['', Validators.required],
confirmPassword: ['', Validators.required]
}, { validator: this.passwordMatchValidator });
}
async onSubmit(): Promise<void> {
if (this.signupForm.valid) {
const name = this.signupForm.get('name').value;
const email = this.signupForm.get('email').value;
const password = this.signupForm.get('password').value;
const userExists = await this.checkIfUserExists(email);
if (userExists) {
this.userExists = true;
} else {
this.userExists = false;
await this.addNewUser(name, email, password);
await this.registerUser(name, email, password);
this.signupForm.reset();
}
} else {
this.signupForm.markAllAsTouched();
}
}
async checkIfUserExists(email: string): Promise<boolean> {
return false;
}
async addNewUser(name: string, email: string, password: string): Promise<void> {
}
async registerUser(name: string, email: string, password: string): Promise<void> {
}
passwordMatchValidator(formGroup: FormGroup) {
const password = formGroup.get('password').value;
const confirmPassword = formGroup.get('confirmPassword').value;
if (password !== confirmPassword) {
formGroup.get('confirmPassword').setErrors({ passwordMismatch: true });
} else {
formGroup.get('confirmPassword').setErrors(null);
}
}
}