Question

我是新手。我在尝试某些东西而被卡住。在我的表单中，我想将服务器验证响应显示为来自laravel rest api的错误。但是不知道如何在模板中存储和显示它。我可以将其记录到控制台，但无法继续显示错误消息。

响应有点像这样-

{
    "message": {
        "firstname":["The firstname field is required."],
        "lastname":["The lastname field is required."],
        "email":["The email field is required."],
        "password":["The password field is required."]
    }
}

服务代码：

registerUser(user): Observable<any> {
    return this.http
      .post<any>(`${this.url}/register`, user)
      .pipe(map(res => res.message));
}

组件类中的注册用户方法：

registerUser() {
    console.log(this.registrationForm.value);
    this.authService.registerUser(this.registrationForm.value).subscribe(
        res => console.log(res),
        err => console.log(err)
    );
}

此外，如果我在任何地方出错了，请改正我，应该如何改正

这就是它的工作方式。
感谢所有人回答我的问题。
组件类方法：

errors = [];
  registerUser() {
    console.log(this.registrationForm.value);
    this.authService.registerUser(this.registrationForm.value).subscribe(
      res => console.log(res),
      err => {
        this.errors = err.error.message;
        console.log(this.errors);
      }
    );
  }

模板中的表单：

 <div class="form-group">
            <label>Firstname</label>
            <input
              type="text"
              formControlName="firstname"
              name="firstname"
              class="form-control rounded-0"
              [class.is-invalid]="errors.firstname"
            />
            <span *ngIf="errors.firstname" class="text-danger">{{
              errors.firstname
            }}</span>
          </div>

Answer 1

Component.html：

<input formControlName="firstName">
<span *ngIf="errMsg.firstname"> {{errMsg.firstname}} </span>
<input formControlName="lastname">
<span *ngIf="errMsg.lastname"> {{errMsg.lastname}} </span>
<input formControlName="email">
<span *ngIf="errMsg.email"> {{errMsg.email)}} </span>
<input formControlName="password">
<span *ngIf="errMsg.password"> {{errMsg.password)}} </span>
<button type="submit" (click)="registerUser()>Submit</button>

Component.ts：

errMsg = [];
registerUser() {
   console.log(this.registrationForm.value);
   this.authService.registerUser(this.registrationForm.value).subscribe(
        res => console.log(res),
        err => {
          console.log(err)
          this.errMsg = err
        }
    );
}

Answer 2

我的理解是，您希望在验证失败的每个字段上显示错误消息，我已经这样做了。

共享方法处理以下问题：

从服务器获取错误后，表单将保持无效状态，直到用户更新相关字段为止。
如果出现一般错误（与任何表单字段无关），则由知道如何显示错误的服务将其呈现在表单外部。

总体思路是创建一个可重用的服务，该服务知道如何检测错误以及如何将其添加到响应式表单，该服务可以处理客户端和服务器错误，我们将其称为ErrorService，该服务可以像renderServerErrors(form: FormGroup, response: ErrorResponse)这样的函数，该函数在每个服务器响应上被调用，并验证在表单中是否存在任何错误。

表单具有给定的字段会导致表单出现错误。

您可以看到以下文件来指导您：

如果您注意的话，错误响应将通过this.errorService.renderServerErrors(this.form, response)处理，该错误响应将执行所有操作，请在https://cryptocoinalerts.net/login查看该错误响应。

更多详细信息

仅当响应状态为非2xx时，服务器才会返回验证错误，例如400（错误请求），500（服务器错误）等。这意味着您的错误处理程序回调将被调用（err => console.log(err)），如果此假设不正确，则需要再次检查以确认响应中是否有任何错误。
错误有两种类型，一种是与字段相关的错误，另一种不是，而后一种则需要一种单独的方式来显示它们。
该示例显示了它如何在服务器响应稍有不同的情况下工作，

{
  "errors": [
    {
      "type": "field-validation-error",
      "field": "password",
      "message": "Incorrect password"
    }
  ]
}

当字段无效时，它会显示红色边框并显示验证错误。
当字段包含有效数据时，它会显示绿色边框。

这是它的外观：

可以随时询问是否不清楚。

Answer 3

这就是它的工作方式。
感谢所有人回答我的问题。
组件类方法：

errors = [];
  registerUser() {
    console.log(this.registrationForm.value);
    this.authService.registerUser(this.registrationForm.value).subscribe(
      res => console.log(res),
      err => {
        this.errors = err.error.message;
        console.log(this.errors);
      }
    );
  }

模板中的表单：

 <div class="form-group">
            <label>Firstname</label>
            <input
              type="text"
              formControlName="firstname"
              name="firstname"
              class="form-control rounded-0"
              [class.is-invalid]="errors.firstname"
            />
            <span *ngIf="errors.firstname" class="text-danger">{{
              errors.firstname
            }}</span>
          </div>

如何以角度形式显示服务器验证错误

3 个答案: