Question

我有一个带有表单验证的大表单，我想对像async这样的用户输入进行验证。我已经完成了我想要的一个字段的验证，但如果我有几个字段，我不知道如何验证单个字段。

以下是我尝试过的示例代码：

    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <p>
            <label>First Name:</label>
            <input type="text" formControlName="firstname" (blur)="validcls()" (keyup)="validcls()" [class.valid]="validclass" [class.invalid]="invalidclass">
        </p>
        <p>
            <label>Password:</label>
            <input type="password" formControlName="password">
        </p>
        <p>
            <button type="submit" [disabled]="!form.valid">Submit</button>
        </p>
    </form>

validcls(){
    if (this.form.controls.firstname.valid){
      this.validclass = true;
      this.invalidclass = false;
    }
    else if (this.form.controls.firstname.invalid || 
      this.form.controls.firstname.touched){
      this.validclass = false;
      this.invalidclass = true;
    }
  }

您可以在此处查看完整的工作示例：

https://stackblitz.com/edit/angular-vfz58j?file=app%2Fapp.component.ts

Answer 1

你可以通过使用ngClass来实现它，不需要键盘功能。

<强> HTML

<section class="sample-app-content">
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <p>
            <label>First Name:</label>
            <input type="text" formControlName="firstname" 
            [ngClass]="{'valid':form.get('firstname').valid,
            'invalid':form.get('firstname').invalid}">
        </p>
        <p>
            <label>Password:</label>
            <input type="password" formControlName="password" [ngClass]="{'valid':form.get('password').valid,
            'invalid':form.get('password').invalid}">
        </p>
        <p>
            <button type="submit" [disabled]="!form.valid">Submit</button>
        </p>
    </form>
</section>

demo stackblitz https://stackblitz.com/edit/angular-h9t56r?file=app%2Fapp.component.html

Answer 2

Error:

和

2018-04-22 16:28:33.203 ERROR 1672 --- [nio-8080-exec-1] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.web.client.HttpClientErrorException: 400 null] with root cause

org.springframework.web.client.HttpClientErrorException: 400 null
    at org.springframework.web.client.DefaultResponseErrorHandler.handleError(DefaultResponseErrorHandler.java:94) ~[spring-web-5.0.2.RELEASE.jar:5.0.2.RELEASE]
    at org.springframework.web.client.DefaultResponseErrorHandler.handleError(DefaultResponseErrorHandler.java:79) ~[spring-web-5.0.2.RELEASE.jar:5.0.2.RELEASE]
    at org.springframework.web.client.ResponseErrorHandler.handleError(ResponseErrorHandler.java:63) ~[spring-web-5.0.2.RELEASE.jar:5.0.2.RELEASE]
    at org.springframework.web.client.RestTemplate.handleResponse(RestTemplate.java:772) ~[spring-web-5.0.2.RELEASE.jar:5.0.2.RELEASE]
    at org.springframework.web.client.RestTemplate.doExecute(RestTemplate.java:725) ~[spring-web-5.0.2.RELEASE.jar:5.0.2.RELEASE]
    at org.springframework.web.client.RestTemplate.execute(RestTemplate.java:681) ~[spring-web-5.0.2.RELEASE.jar:5.0.2.RELEASE]
    at org.springframework.web.client.RestTemplate.exchange(RestTemplate.java:597) ~[spring-web-5.0.2.RELEASE.jar:5.0.2.RELEASE]
    at path.CustomerCreationRestService.createCustomer(CustomerCreationRestService.java:65) ~[classes/:na]

那就是它。更改每个输入的控件名称。请注意，我修改了第二个条件，因为我相信这是您想要的行为。当然，如果不是这样，您可以根据自己的需要进行修改。

使用有效和无效的类进行表单验证

2 个答案: