我是Angular（V6）的新手，我有点迷失了。我一直在寻找问题的答案，但是经过几天的研究，我无法找到想要的东西。希望你们能帮助我。
我开发了一个API，其中有一个用于帐户注册的端点。对于POST请求，服务器仅检查主体请求中的所有内容是否都正确，否则它将发送带有字段错误的JSON（例如，用户名已被使用或太短，密码不匹配，电子邮件地址已被使用等）。
我想在提交响应式表单时使用异步验证，这样我就可以获得服务器响应并在表单中显示错误。但是我没有做到。对于这种情况，我在Angular文档中没有真正清晰的示例。
sign-up.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ApiService } from './../../services/api.service';
@Component({
selector: 'app-sign-up',
templateUrl: './sign-up.component.html',
styleUrls: ['./sign-up.component.scss']
})
export class SignUpComponent implements OnInit {
signupForm: FormGroup;
constructor(
private formBuilder: FormBuilder,
private apiService: ApiService
) { }
ngOnInit() {
this.initForm();
}
initForm() {
this.signupForm = this.formBuilder.group({
firstname: ['', Validators.required],
lastname: ['', Validators.required],
username: ['', Validators.required],
email: ['', Validators.required],
password: ['', Validators.required],
confirmPassword: ['', Validators.required],
birthdate: ['', Validators.required],
gender: ['', Validators.required]
}, {
asyncValidator: this.myAsyncValidator() // Am I wrong?
});
}
onSubmitForm() {
console.log('submit');
// On submit, I send the form to the server.
// If the account has been created, I redirect the user (no problem for that)
// but if there are some errors, I would like to display them into the form.
}
myAsyncValidator () {
// I'm lost here
}
}
api.service.ts
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
const apiURL = 'MY_SERVER_URL';
@Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(private http: HttpClient) { }
signUp(data: Object) {
const body = JSON.stringify(data);
return this.http.post(`${apiURL}/authentication/signup/`, body, httpOptions);
}
}
sign-up.component.html
<div class="signup-container">
<div class="mx-auto">
<form [formGroup]="signupForm" (ngSubmit)="onSubmitForm()">
<mat-form-field>
<input matInput placeholder="Prénom" formControlName="firstname">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Nom" formControlName="lastname">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Pseudo" formControlName="username">
</mat-form-field>
<mat-form-field>
<input matInput type="email" placeholder="Email" formControlName="email">
</mat-form-field>
<mat-form-field>
<input matInput type="password" placeholder="Mot de passe" formControlName="password">
</mat-form-field>
<mat-form-field>
<input matInput type="password" placeholder="Confirmer le mot de passe" formControlName="confirmPassword">
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Date de naissance" formControlName="birthdate" (focus)="picker.open()">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-radio-group formControlName="gender">
<mat-radio-button value="Femme">Femme</mat-radio-button>
<mat-radio-button value="Homme">Homme</mat-radio-button>
</mat-radio-group>
<button type="submit" mat-stroked-button class="save-button"><i class="material-icons save-icon">save</i>Inscription</button>
</form>
</div>
</div>
答案 0 :(得分：0)
我已经找到解决问题的方法。我已经从反应形式转换为模板驱动形式。我知道这不是最好的解决方案，我将尝试找到一种更好的解决方案。希望这可以帮助任何人！
这就是我所做的：
sign-up.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { ApiService } from './../../services/api.service';
@Component({
selector: 'app-sign-up',
templateUrl: './sign-up.component.html',
styleUrls: ['./sign-up.component.scss']
})
export class SignUpComponent implements OnInit {
isSending = false;
submitText = 'Inscription';
constructor(
private apiService: ApiService,
private router: Router
) { }
ngOnInit() { }
onSubmit(formData: NgForm) {
this.isSending = true;
this.submitText = 'Inscription en cours...';
this.apiService.signUp(formData.value).subscribe(
response => {
this.router.navigate(['/signin']);
},
error => {
const errors = error.error.message.errors; // Yeah... Mongoose validator...
for (const fieldError in errors) {
if (errors[fieldError]) {
formData.form.controls[fieldError].setErrors({ invalid: errors[fieldError]['message'] });
}
}
this.isSending = false;
this.submitText = 'Inscription';
}
);
}
}
sign-up.component.html
<div class="signup-container">
<div class="mx-auto">
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
<mat-form-field>
<input matInput placeholder="Prénom" ngModel name="firstname" #firstname="ngModel">
<mat-error *ngIf="firstname.errors">{{firstname.errors['invalid']}}</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Nom" ngModel name="lastname" #lastname="ngModel">
<mat-error *ngIf="lastname.errors">{{lastname.errors['invalid']}}</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Pseudo" ngModel name="username" #username="ngModel">
<mat-error *ngIf="username.errors">{{username.errors['invalid']}}</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput type="email" placeholder="Email" ngModel name="email" #email="ngModel">
<mat-error *ngIf="email.errors">{{email.errors['invalid']}}</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput type="password" placeholder="Mot de passe" ngModel name="password" #password="ngModel">
<mat-error *ngIf="password.errors">{{password.errors['invalid']}}</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput type="password" placeholder="Confirmer le mot de passe" ngModel name="confirmPassword" #confirmPassword="ngModel">
<mat-error *ngIf="confirmPassword.errors">{{confirmPassword.errors['invalid']}}</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Date de naissance" ngModel name="birthdate" #birthdate="ngModel" (focus)="picker.open()">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="birthdate.errors">{{birthdate.errors['invalid']}}</mat-error>
</mat-form-field>
<mat-radio-group ngModel name="gender" #gender="ngModel">
<mat-radio-button value="Femme">Femme</mat-radio-button>
<mat-radio-button value="Homme">Homme</mat-radio-button>
<mat-error *ngIf="gender.errors">{{gender.errors['invalid']}}</mat-error>
</mat-radio-group>
<button type="submit" mat-stroked-button class="save-button" [disabled]="isSending">
<i class="material-icons save-icon">save</i>{{submitText}}
</button>
</form>
</div>
</div>