1
非同期カスタムバリデーターを作成して、EmployeeIdがすでにフォームに存在するかどうかを確認しようとしています。そのために私はカスタムバリデーターを作成し、Web APIを呼び出すためのサービスを実装しました。私はこれを行う方法を未定義非同期検証 - 角度2のカスタム検証からサービスにアクセスできません
誰でも持つアイデアのプロパティ「サービス」を読み込めませんと言って、私はエラーを得た社員を検索しようとした
..
カスタムバリデータ
import { FormControl } from '@angular/forms'
import { HttpService } from '../Services/app.service';
export class EmployeeValidators {
constructor(private service: HttpService) { }
EmpIdCheck(control: FormControl) {
this.service.LoginCheck(control.value).subscribe(
data => {
if (data.length == 0 || data.length == 1) {
resolve(null);
} else {
resolve({ EmpIdCheck: true });
}
},
err => {
resolve({ EmpIdCheck: true });
}
)
});
}
}
コンポーネント
export class LoginComponent {
myForm: FormGroup;
constructor(private _HttpService: HttpService, private fb: FormBuilder) {
this.myForm = fb.group({
empId: ['', Validators.compose([Validators.required, Validators.pattern("^[0-9]*$"), Validators.minLength(5), Validators.maxLength(5)]), new EmployeeValidators(this._HttpService).EmpIdCheck],
password: ['', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(10)])]
});
}
サービス
@Injectable()
export class HttpService {
public LoginCheck = (datas): any => {
let body = JSON.stringify({ datas });
return this._http.post(this.actionUrl, datas, {headers: this.headers}).map(this.extractData)
.do(data => console.log(data))
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body.Data || {};
}
private handleError(error: Response) {
console.log(error)
return Observable.throw(error.json() || "server error")
}
}