我有一个问题,创建一个验证器,检查是否在输入表单字段后,数据库中已存在给定的“用户名”。我在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中发出的请求正确执行。 欢迎任何帮助或建议。
发布于 2018-12-18 11:24:54
您使用的是ChangeDetection.OnPush还是默认的changeDetection?
在changeDetection.OnPush的情况下,问题可能是虽然设置了FormGroup中的属性(错误),但formGroup本身不会更改,因此模板可能尚未更新。
https://stackoverflow.com/questions/-100006310
复制相似问题