Question

由于这个错误浪费了太多时间。我写了一个自定义验证，确保＆＃34;货币名称＆＃34;不重复，自定义验证函数调用＆＃34; validateNameUniqness＆＃34;正在从laravel api调用http服务。

laravel必须确定名称是否重复：如果name没有重复，那么laravel将返回true，否则它将返回一条错误消息。在这两种情况下，laravel都会以状态＆＃34; 200＆＃34;。

标记响应

laravel代码：

 public function validateCurrencyNameUniqness($name){
    $request = new Request();
    $request->replace(['name' => $name]);

    $validator = Validator::make($request->all(),[
      'name' => 'unique:currencies',
      ]);
    if ($validator->fails()) {
        $uniqness_error = $validator->errors()->first('name');
        return response()->json($uniqness_error, 200);
    }
    return response()->json(true, 200);
}

angular service将调用laravel api并返回Promise：

 validateCurrencyNameUniqness(name:string): Promise<any>{
   return 
    this.http.get('http://127.0.0.1:8000/api/validateCurrencyNameUniqness/' 
     + name)
     .toPromise()
     .then(this.extractData)
     .catch(this.handleError);
  }

private extractData(res: Response) {
   let body = res.json();
    return body || {};
}

private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
}

如果不重复名称，

角度自定义验证函数将返回null，否则它将返回一个对象：

validateNameUniqness(control: FormControl ): {[key: string]: any} { 
  let name = control.value; 
  if(name){
      // if name is valid return null, else return error object
      this.services.validateCurrencyNameUniqness(name)
      .then(result =>{
          if(result !== true){
            this.unqiness_msg = result;
            console.log(this.unqiness_msg );
            return {'not_unique': {value: true}}
            //return {'not_unique': true};
          }

      })
      .catch(error => console.log(error));   
 }
 return null;
 }

角材料＆amp; html脚本：

 <mat-form-field>
            <input type="text" matInput #currency_name maxlength="30" placeholder="Currency Name" required [(ngModel)]="currency.name" name="name" [formControl]="name"   (readystatechange)="validateNameUniqness(name)">
            <mat-hint align="end">{{currency_name.value?.length || 0}}/30</mat-hint>
                <mat-error *ngIf="name.invalid && (name.dirty || name.touched)">{{getErrorMessage()}}</mat-error>
            </mat-form-field>

          <mat-form-field>

验证电话：

 name = new FormControl('', [Validators.required,this.validateNameUniqness.bind(this)]);

 getErrorMessage() {
         if(this.name.hasError('not_unique'))
             return this.unqiness_msg;
         if (this.name.hasError('required') || this.symbol.hasError('required') || this.decimals_after_point.hasError('required'))
             return 'You must enter a value';


     }

我认为验证表格永远不会是＃34;无效＆＃34;用于唯一性验证。测试显示自定义验证功能正在将错误消息记录到控制台，如果名称重复，但它从不向用户显示错误消息！

感谢任何帮助。

Answer 1

您的验证器中存在一些小问题

您的验证员应始终返回
您的验证员应始终返回承诺
您应该在您的功能中注入服务

您的代码应如下所示（这是我的自定义验证程序实现）

export const buidUsermameValidator = (service: UserService, oldUsername?: string) => (username: FormControl): ValidationErrors | null => {
  if (username && username.value !== "" && username.value !== oldUsername) {
    return service.usermameExist(username.value).toPromise()
      .then((result) => {
        if (result) {
          return { "exist": true }
        }
        return null
      })
      .catch(err => { return null })
  } else {
    return Promise.resolve(null)
  }
}

当您要使用验证器时，您的代码应如下所示

this.userForm = this.fb.group({
      "username": ["", Validators.compose([Validators.required]), buidUsermameValidator(this.service)],

    })

Answer 2

首先，这需要是一个异步验证器，如果你没有这样做，请检查一下。对于两个，您的验证器函数不返回任何内容。回报你从服务中得到的承诺。

if (name) {
    // if name is valid return null, else return error object
    return this.services.validateCurrencyNameUniqness(name)

另外，请不要忘记还从.then和.catch处理程序返回。

为什么自定义验证消息不起作用

2 个答案: