[英]How to use custom Validator in Angular5 and spring-boot
我正在使用HTTPCLIENT在前端使用一個簡單的angular5應用程序,在后端使用spring-boot,我正在創建一個簡單的組件來添加帶有字段username的新客戶端。
我正在嘗試使用custum驗證程序,以便可以檢查用戶名是否唯一或已使用,但是我遇到了很多錯誤。 這是角面
new-client.component.html
<div >
<div class="col-sm-10">
<div class="card">
<div class="card-header">
<strong>add a new client</strong>
</div>
<form [formGroup]="form" (ngSubmit)="SaveClient()">
<div class="card-body">
<div class="form-group">
<label for="vat">Email </label>
<input type="text" class="form-control" id="vat" formControlName="username" />
<div class="error" *ngIf="form.controls['username'].invalid && form.controls['username'].errors.required && (form.controls['username'].dirty || form.controls['username'].touched)">Please enter an email</div>
<div class="error" *ngIf="form.controls['username'].invalid && form.controls['username'].errors.email && (form.controls['username'].dirty || form.controls['username'].touched)">Please enter a valid email</div>
<div class="error" *ngIf="form.controls['username'].invalid && form.controls['username'].errors.emailTaken">This email has been taken, please use another one.</div>
</div>
<div formGroupName = "passwordG">
<div class="form-group">
<label for="vat">Password</label>
<input type="password" class="form-control" id="vat" formControlName="password" />
</div>
<div class="form-group">
<label for="vat">Confirmation Password</label>
<input type="password" class="form-control" id="vat" formControlName="Confirmationpassword" />
</div>
<div *ngIf="(form.controls['passwordG'].invalid && form.controls['passwordG'].touched)" class="col-sm-3 text-danger">
<ng-container *ngIf="form.controls['passwordG'].errors?.mismatch;
then first else second"> </ng-container>
<ng-template #first>
Password do not match </ng-template>
<ng-template #second>
Password needs to be more than 8 characters
</ng-template>
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-primary" ><i class="fa fa-dot-circle-o"></i>Enregistrer</button>
</div>
</form>
</div>
</div><!--/.col-->
</div>
new-client.component.ts
function passwordMatch(control: AbstractControl):{[key: string]: boolean}{
const password = control.get('password');
const Confirmationpassword = control.get('Confirmationpassword');
if( !password || !Confirmationpassword) {
return null; }
if(password.value === Confirmationpassword.value){
return null;
}
return {
mismatch:true
}
}
@Component({
selector: 'app-new-clients',
templateUrl: './new-clients.component.html',
styleUrls: ['./new-clients.component.scss']
})
export class NewClientsComponent implements OnInit {
client:Clients = new Clients();
form: FormGroup;
constructor(private clientService:ClientService,
private formBuilder: FormBuilder,
public router:Router,
public activatedRoute:ActivatedRoute) { }
ngOnInit() {
this.form = this.formBuilder.group({
username: ['', Validators.required , Validators.email , this.validateEmailNotTaken.bind(this)],
passwordG: this.formBuilder.group({
password: ['',[Validators.required,Validators.minLength(9)]],
Confirmationpassword : ['',[Validators.required,Validators.minLength(9)]]
}, {validator: passwordMatch})
});
}
SaveClient(){
this.client.setUsername(this.form.value.username);
this.client.setPassword(this.form.value.passwordG.password);
this.clientService.saveClient(this.client)
.subscribe((data:Clients)=>{
swal("operation réussi !", "great !", "success");
this.router.navigate([ '../list' ], { relativeTo: this.activatedRoute });
},err=>{
console.log(err);
})
}
validateEmailNotTaken(control: AbstractControl) {
return this.clientService.checkEmailNotTaken(control.value).map(res => {
return res ? null : { emailTaken: true };
}); //somthing is wrong HERE !
}
}
client.service.ts
@Injectable()
export class ClientService {
checkEmailNotTaken(email:string){
if(this.authService.getToken()==null) {
this.authService.loadToken();
}
return this.http.post(this.host+
"/checkEmailUnique/",{email},{headers:new HttpHeaders({'Authorization':this.authService.getToken()})});
}
}
在春季啟動中:
@RequestMapping(value="/checkEmailUnique",method=RequestMethod.POST)
public EmailStatusCheckJson checkEmailUnique(@RequestBody final AppUser appUser){
final EmailStatusCheckJson returnValue = new EmailStatusCheckJson();
System.out.println("username **"+appUser.getUsername());
AppUser app = userRepo.findByUsername(appUser.getUsername());
if(app!=null){
System.out.println("exists");
returnValue.setEmailIsAvailable(false);
}
else{
System.out.println("doesnt exist ");
returnValue.setEmailIsAvailable(true);
}
return returnValue;
}
這是我得到的錯誤
ERROR Error: Expected validator to return Promise or Observable.
at toObservable (forms.js:749)
at Array.map (<anonymous>)
at FormControl.eval [as asyncValidator] (forms.js:729)
at FormControl.AbstractControl._runAsyncValidator (forms.js:3447)
at FormControl.AbstractControl.updateValueAndValidity (forms.js:3390)
at FormControl.setValue (forms.js:3973)
任何想法 ? 我是新來的。
您在這里缺少括號
username: ['', Validators.required , Validators.email , this.validateEmailNotTaken.bind(this)]
應該
username: ['', [Validators.required , Validators.email , this.validateEmailNotTaken.bind(this)]]
控制的含義是
所以應該
['', [Validators.required, Validators.email], this.validateEmailNotTaken.bind(this)]
因為validateEmailNotTaken
是一個異步驗證器。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.