角度表单验证 - 用户已存在
角度表单验证 - 用户已存在
提问于 2018-12-18 01:39:48
我有一个问题，创建一个验证器，检查是否在输入表单字段后，数据库中已存在给定的“用户名”。我在web api中创建了一个方法，根据给定的值检查数据库中是否存在用户将返回true或false。
[HttpGet]
[AllowAnonymous]
[Route("api/CheckIfExist/{username}")]
public async Task <HttpResponseMessage> CheckIfExist(string username)
{
var userStore = new UserStore<ApplicationUser>(new ApplicationDbContext());
var manager = new UserManager<ApplicationUser>(userStore);
var result = await userStore.FindByNameAsync(username);
if (result == null)
{
return Request.CreateResponse(false.ToString());
}
else
{
return Request.CreateResponse(true.ToString());
}
}
然后我创建了角度服务，从Web API捕获数据：
export class UserService {
readonly rootUrl = 'http://localhost:61923';
constructor(private http: HttpClient) { }
registerUser(user: User) {
const body: User = {
UserName: user.UserName,
Password: user.Password,
Email: user.Email,
FirstName: user.FirstName,
LastName: user.LastName
};
const reqHeader = new HttpHeaders({'No-auth': 'True'});
return this.http.post(this.rootUrl + '/api/User/Register', body, {headers: reqHeader});
}
CheckUsernameIfExist(user: User) {
return this.http.get(this.rootUrl + '/api/CheckIfExist/'+ user.UserName);
最后，我创建了注册组件。我使用ReactiveForms构建表单并传递验证器：
ngOnInit() {
this.formInitBuilder();
}
formInitBuilder() {
this.form = this.formBuilder.group ({
UserName: new FormControl('', [Validators.required], this.validateUserNameTaken.bind(this)),
Password: new FormControl('', [ Validators.required, Validators.minLength(3)]),
Email: new FormControl('', [Validators.required, Validators.email]),
FirstName: new FormControl(),
LastName: new FormControl()
});
}
// Validator
validateUserNameTaken(control: AbstractControl) {
return this.userService.CheckUsernameIfExist(control.value).map(res => {
return res ? null : { userName: true };
});
}
HTML：
<form class="main-form needs-validation" [formGroup]="form" >
<div class="row">
<div class="col">
<div class="form-group">
<input type="text" class="form-control" name="UserName" formControlName="UserName" required>
<div *ngIf="form.get('UserName').errors && form.get('UserName').errors['userName']">
Username is already taken!
</div>
</div>
</div>
我在Visual studio和Chrome控制台上没有任何错误，但验证器无法正常工作。我还在调试器中检查了验证器为userName = abc获得的数据是什么，因为它应该是因为这个userName已经在数据库中但是没有抛出消息“已经获取了给定的用户名”。 我制作了验证器 数据库不为空，并且在Postman中发出的请求正确执行。 欢迎任何帮助或建议。
回答 1
Stack Overflow用户
发布于 2018-12-18 11:24:54
您使用的是ChangeDetection.OnPush还是默认的changeDetection？
在changeDetection.OnPush的情况下，问题可能是虽然设置了FormGroup中的属性（错误），但formGroup本身不会更改，因此模板可能尚未更新。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100006310
复制相关文章
相似问题